{"version":3,"sources":["../../../../src/nhsuk/components/header/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/objects\" as *;\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n@forward \"../input\";\n\n////\n/// Header component\n///\n/// This component has 4 colour variations:\n///\n/// 1. Blue background\n/// 2. Blue background with white background for navigation\n/// 3. White background with blue background for navigation\n/// 4. White background\n///\n/// The behaviour with regards to navigation is as follows:\n///\n/// Menu toggle button is hidden until there is no space for navigation items\n/// to display horizontally. Once there are overflowing navigation items to\n/// display, the menu toggle button is shown, which toggles the overflow menu.\n///\n/// @group components/header\n////\n\n$nhsuk-header-item-colour: $nhsuk-brand-colour;\n$nhsuk-header-item-button-colour: nhsuk-tint($nhsuk-brand-colour, 93%);\n$nhsuk-header-item-hover-colour: nhsuk-shade($nhsuk-brand-colour, 20%);\n$nhsuk-header-item-active-colour: nhsuk-shade($nhsuk-brand-colour, 35%);\n\n$nhsuk-header-reverse-item-colour: $nhsuk-reverse-text-colour;\n$nhsuk-header-reverse-item-hover-colour: $nhsuk-reverse-text-colour;\n$nhsuk-header-reverse-item-active-colour: $nhsuk-reverse-text-colour;\n\n/// Header link styling\n///\n/// @param {Colour} $link-colour [$nhsuk-header-item-colour] - Link colour\n/// @param {Colour} $link-hover-colour [$nhsuk-header-item-hover-colour] - Link hover colour\n/// @param {Colour} $link-active-colour [$nhsuk-header-item-active-colour] - Link active colour\n///\n/// @access private\n\n@mixin _header-link-style(\n  $link-colour: $nhsuk-header-item-colour,\n  $link-hover-colour: $nhsuk-header-item-hover-colour,\n  $link-active-colour: $nhsuk-header-item-active-colour\n) {\n  & {\n    color: $link-colour;\n  }\n\n  @include nhsuk-link-style-visited($link-colour);\n  @include nhsuk-link-style-hover($link-hover-colour);\n  @include nhsuk-link-style-active($link-active-colour);\n  @include nhsuk-link-style-focus;\n\n  &:focus {\n    color: $nhsuk-focus-text-colour;\n    box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-colour;\n  }\n\n  @include nhsuk-print-colour($print-colour: inherit) {\n    &::after {\n      content: \"\";\n    }\n  }\n}\n\n@include nhsuk-exports(\"nhsuk/components/header\") {\n  $_header-item-padding: 12px;\n  $_header-link-padding: 2px;\n  $_header-item-active-size: $nhsuk-focus-width;\n\n  .nhsuk-header {\n    outline: 1px solid transparent;\n    color: $nhsuk-reverse-text-colour;\n    background-color: $nhsuk-brand-colour;\n\n    // Add shadow to bottom of header when open\n    &:has(.nhsuk-header__menu-list:not([hidden])) {\n      border-bottom: nhsuk-spacing(1) solid $nhsuk-border-colour;\n    }\n\n    @include nhsuk-print-colour;\n  }\n\n  .nhsuk-header__container {\n    padding: nhsuk-spacing(3) 0;\n\n    .nhsuk-header--inline & {\n      display: flex;\n      flex-flow: row wrap;\n      gap: nhsuk-spacing(3);\n\n      @include nhsuk-media-query($from: tablet) {\n        gap: nhsuk-spacing(3) nhsuk-spacing(4);\n      }\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      display: flex;\n      flex-flow: row wrap;\n      gap: nhsuk-spacing(3);\n    }\n  }\n\n  // Service logo (and optional name)\n\n  .nhsuk-header__logo {\n    min-width: nhsuk-px-to-rem(100px);\n    height: intrinsic;\n  }\n\n  .nhsuk-header__service,\n  .nhsuk-header__service-logo {\n    margin-right: auto;\n    gap: nhsuk-spacing(2) nhsuk-spacing(3);\n  }\n\n  .nhsuk-header__service {\n    display: flex;\n\n    // Always reserve space for service name when inline\n    .nhsuk-header--inline & {\n      flex-basis: nhsuk-px-to-rem(220px);\n      flex-grow: 999;\n    }\n\n    // Unless we know there's no service name\n    .nhsuk-header--inline &:not(:has(.nhsuk-header__service-name)) {\n      flex-basis: auto;\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      flex-grow: 999;\n    }\n  }\n\n  .nhsuk-header__service-name {\n    display: inline-flex;\n\n    flex-direction: column;\n    flex-grow: 0;\n    justify-content: center;\n\n    max-width: 54ch;\n    margin-right: auto;\n\n    text-wrap: balance;\n    @include nhsuk-font(19, $line-height: 1.1);\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  .nhsuk-header__service-logo {\n    display: inline-flex;\n\n    position: relative;\n\n    flex-grow: 0;\n\n    margin-right: 0;\n\n    line-height: 0;\n    text-decoration: none;\n\n    &:only-child {\n      display: flex;\n    }\n\n    // Add SVG logo underline on hover\n    //\n    // It should be possible to add a box shadow directly to .nhsuk-header_logo\n    // however Safari doesn’t render anything beyond the bounding box of the SVG.\n    // By adding a pseudo element with the same dimensions, we style this instead.\n    &:has(svg):not(:focus):hover::before {\n      content: \"\";\n\n      box-sizing: border-box;\n\n      display: inline;\n\n      position: absolute;\n      top: 0.2rem;\n\n      width: nhsuk-px-to-rem(100px);\n      height: nhsuk-px-to-rem(40px);\n\n      border-bottom: 0.1rem solid currentcolor;\n    }\n  }\n\n  .nhsuk-header__service-logo,\n  .nhsuk-header__service-name[href],\n  .nhsuk-header__account-button,\n  .nhsuk-header__account-link {\n    @include _header-link-style(\n      $link-colour: $nhsuk-header-reverse-item-colour,\n      $link-hover-colour: $nhsuk-header-reverse-item-hover-colour,\n      $link-active-colour: $nhsuk-header-reverse-item-active-colour\n    );\n  }\n\n  // Account\n\n  .nhsuk-header__account {\n    flex-grow: 1;\n\n    margin-top: nhsuk-spacing(3);\n\n    overflow: hidden;\n\n    border: 1px solid nhsuk-shade($nhsuk-brand-colour, 20%);\n    border-radius: nhsuk-px-to-rem($nhsuk-border-radius);\n\n    background-color: nhsuk-shade($nhsuk-brand-colour, 20%);\n\n    .nhsuk-icon--user {\n      flex-shrink: 0;\n      width: nhsuk-px-to-rem(24px);\n      height: nhsuk-px-to-rem(24px);\n    }\n\n    .nhsuk-header--inline & {\n      align-self: start;\n\n      // Expand header account by 1px to ensure the search\n      // input does not appear to be taller when inline\n      margin: -1px;\n    }\n\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      align-self: start;\n\n      // Expand header account by 1px to ensure the search\n      // input does not appear to be taller when inline\n      margin: -1px;\n    }\n  }\n\n  .nhsuk-header__account-list {\n    display: flex;\n\n    position: relative;\n\n    flex-wrap: wrap;\n\n    margin: 0;\n    padding: 0;\n\n    overflow: hidden;\n\n    list-style: none;\n\n    gap: 1px;\n  }\n\n  .nhsuk-header__account-item {\n    display: flex;\n\n    flex-grow: 1;\n\n    margin: 0;\n    padding: nhsuk-spacing(2) $_header-item-padding;\n\n    outline: 1px solid $nhsuk-brand-colour;\n\n    overflow-wrap: anywhere;\n\n    gap: nhsuk-spacing(2);\n    @include nhsuk-font(16);\n\n    &:nth-last-child(2) {\n      margin-right: auto;\n    }\n\n    &:last-child {\n      flex-grow: 0;\n    }\n  }\n\n  .nhsuk-header__account-button,\n  .nhsuk-header__account-link {\n    display: flex;\n    margin: nhsuk-spacing(-2) ($_header-item-padding * -1);\n    padding: nhsuk-spacing(2) $_header-item-padding;\n    overflow-wrap: anywhere;\n    gap: nhsuk-spacing(2);\n  }\n\n  .nhsuk-header__account-button {\n    border: 0;\n    background: none;\n    text-decoration: underline;\n    cursor: pointer;\n    @include nhsuk-font(16);\n  }\n\n  // Search\n\n  .nhsuk-header__search {\n    display: block;\n    position: relative;\n    z-index: 10;\n    flex-grow: 1;\n    margin-top: nhsuk-spacing(3);\n\n    .nhsuk-header--inline & {\n      margin-top: 0;\n    }\n\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      margin: 0;\n    }\n\n    .nhsuk-icon--search {\n      width: nhsuk-px-to-rem(28px);\n      height: nhsuk-px-to-rem(28px);\n    }\n  }\n\n  .nhsuk-header__search-form {\n    display: flex;\n    height: 100%;\n    overflow: visible;\n\n    .nhsuk-form-group {\n      width: 100%;\n      margin: 0;\n    }\n\n    .nhsuk-input-wrapper {\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  // Disable default search input appearance\n  .nhsuk-header__search-form .nhsuk-input,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-header__search-input {\n    width: 100%;\n    height: nhsuk-px-to-rem(40px);\n    padding-right: $_header-item-padding - $nhsuk-border-width-form-element;\n    padding-left: $_header-item-padding - $nhsuk-border-width-form-element;\n\n    border-radius: nhsuk-px-to-rem($nhsuk-border-radius) 0 0 nhsuk-px-to-rem($nhsuk-border-radius);\n    border-color: transparent;\n\n    background-color: $nhsuk-input-background-colour;\n\n    @include nhsuk-font-size(16);\n\n    &:focus {\n      z-index: 10;\n      border-color: $nhsuk-focus-text-colour;\n    }\n\n    // Hide search input clear button (IE)\n    &::-ms-clear {\n      display: none;\n    }\n\n    // Hide search input icon and cancel button (WebKit, Blink)\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button {\n      appearance: none;\n    }\n\n    @include nhsuk-media-query($until: tablet) {\n      font-size: inherit;\n    }\n  }\n\n  .nhsuk-header__search-form .nhsuk-button,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-header__search-submit {\n    flex-shrink: 0;\n\n    width: nhsuk-px-to-rem(44px);\n    height: nhsuk-px-to-rem(40px);\n\n    // stylelint-disable-next-line declaration-no-important\n    margin: 0 !important;\n\n    // Reduce padding to better fit icon\n    padding: 0 nhsuk-spacing(2) - 1px;\n\n    border: 1px solid transparent;\n    border-radius: 0 nhsuk-px-to-rem($nhsuk-border-radius) nhsuk-px-to-rem($nhsuk-border-radius) 0;\n\n    color: $nhsuk-brand-colour;\n    background-color: $nhsuk-header-item-button-colour;\n    box-shadow: none;\n\n    line-height: 1;\n\n    cursor: pointer;\n\n    &:hover,\n    &:active {\n      border-color: nhsuk-colour(\"white\");\n      color: nhsuk-colour(\"white\");\n      background-color: $nhsuk-header-item-hover-colour;\n    }\n\n    &:active {\n      background-color: $nhsuk-header-item-active-colour;\n    }\n\n    // Prevent height change when pressed\n    &:active,\n    &:active:focus {\n      top: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus:not(:active),\n    &:focus:not(:active):hover {\n      border-color: transparent;\n\n      @include nhsuk-focused-button;\n    }\n  }\n\n  // Navigation\n\n  .nhsuk-header__navigation {\n    border: 0 solid nhsuk-colour(\"white\");\n    color: nhsuk-colour(\"white\");\n    background-color: $nhsuk-brand-colour;\n\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      border: 0;\n    }\n\n    @include nhsuk-print-hide;\n  }\n\n  .nhsuk-header__navigation-list {\n    display: flex;\n\n    position: relative;\n\n    flex-wrap: wrap;\n\n    width: calc(100% + $nhsuk-gutter-half);\n    margin: 0 math.div($nhsuk-gutter-half, 2) * -1;\n    padding: 0;\n\n    list-style: none;\n\n    @include nhsuk-media-query($from: tablet) {\n      width: calc(100% + $nhsuk-gutter);\n      margin: 0 math.div($nhsuk-gutter, 2) * -1;\n    }\n\n    .nhsuk-header__navigation--justified & {\n      @include nhsuk-media-query($from: desktop) {\n        justify-content: space-between;\n      }\n    }\n\n    .nhsuk-frontend-supported & {\n      flex-wrap: nowrap;\n    }\n  }\n\n  .nhsuk-header__navigation-item {\n    margin-bottom: 0;\n    padding: 0 math.div($nhsuk-gutter-half, 2);\n\n    @include nhsuk-media-query($from: tablet) {\n      padding: 0 $nhsuk-gutter-half;\n    }\n  }\n\n  // This is a <strong> element used as a fallback mechanism for visually\n  // indicating current page in scenarios where CSS isn’t available.\n  // We don’t actually want it to be bold normally, so inherit parent font-weight.\n  .nhsuk-header__navigation-item-current-fallback {\n    font-weight: inherit;\n  }\n\n  .nhsuk-header__navigation-link,\n  .nhsuk-header__navigation-text {\n    display: block;\n\n    position: relative;\n\n    margin: 0;\n    padding: nhsuk-spacing(3) $_header-link-padding;\n\n    border: 0;\n    border-radius: 0;\n\n    color: $nhsuk-header-reverse-item-colour;\n\n    background: transparent;\n\n    text-decoration: underline;\n    white-space: nowrap;\n\n    cursor: pointer;\n    @include nhsuk-font(16);\n\n    // Visual indicator for navigation item uses a border on bottom edge\n    &::before {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n\n      border: 0 solid currentcolor;\n    }\n\n    // Visual indicator for current navigation\n    &[aria-current=\"page\"]::before,\n    &[aria-current=\"true\"]::before {\n      border-bottom-width: $_header-item-active-size;\n    }\n\n    @include nhsuk-media-query($until: tablet) {\n      font-size: inherit;\n    }\n  }\n\n  .nhsuk-header__navigation-link {\n    @include _header-link-style(\n      $link-colour: $nhsuk-header-reverse-item-colour,\n      $link-hover-colour: $nhsuk-header-reverse-item-hover-colour,\n      $link-active-colour: $nhsuk-header-reverse-item-active-colour\n    );\n  }\n\n  // Menu (shown when screen can’t fit all navigation items)\n\n  .nhsuk-header__menu {\n    align-self: center;\n    padding: 0 math.div($nhsuk-gutter-half, 2);\n\n    &[hidden] {\n      display: none;\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      padding: 0 $nhsuk-gutter-half;\n    }\n  }\n\n  .nhsuk-header__menu-toggle {\n    $_chevron-font-size: 19;\n\n    display: flex;\n    align-items: center;\n    padding-right: nhsuk-em($_chevron-font-size, 16);\n    text-align: center;\n\n    &,\n    &:hover {\n      text-decoration: none;\n    }\n\n    &[hidden] {\n      display: none;\n    }\n\n    &::after {\n      content: \"\";\n\n      position: absolute;\n      top: 2px;\n      right: $_header-link-padding;\n      bottom: 0;\n\n      margin: auto;\n\n      @include nhsuk-shape-chevron(down, currentcolor, $font-size: $_chevron-font-size);\n    }\n\n    &[aria-expanded=\"true\"]::after {\n      @include nhsuk-shape-chevron(up, currentcolor, $font-size: $_chevron-font-size);\n    }\n  }\n\n  .nhsuk-header__menu-list {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    left: 0;\n\n    margin: 0 math.div($nhsuk-gutter-half, 2);\n    padding: 0;\n\n    list-style: none;\n\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      margin: 0 $nhsuk-gutter-half;\n    }\n\n    &[hidden] {\n      display: none;\n    }\n\n    .nhsuk-header__navigation-link,\n    .nhsuk-header__navigation-text {\n      color: $nhsuk-header-item-colour;\n\n      // Visual indicator for navigation item uses a border on left edge\n      &[aria-current=\"page\"]::before,\n      &[aria-current=\"true\"]::before {\n        top: 0;\n        right: auto;\n        bottom: 0;\n        left: -$nhsuk-gutter-half;\n\n        width: 0;\n\n        border-left-width: $_header-item-active-size;\n\n        // stylelint-disable-next-line max-nesting-depth\n        @include nhsuk-media-query($from: desktop) {\n          left: -$nhsuk-gutter;\n        }\n      }\n    }\n\n    .nhsuk-header__navigation-link {\n      @include _header-link-style;\n    }\n\n    .nhsuk-header__navigation-item {\n      padding: 0;\n      border-bottom: 1px solid nhsuk-colour(\"grey-5\");\n\n      &:last-child {\n        border-color: transparent;\n      }\n    }\n  }\n\n  // White header navigation variant\n\n  .nhsuk-header__navigation--white {\n    color: $nhsuk-brand-colour;\n    background-color: nhsuk-colour(\"white\");\n\n    .nhsuk-header__navigation-link,\n    .nhsuk-header__navigation-text {\n      color: $nhsuk-header-item-colour;\n    }\n\n    .nhsuk-header__navigation-link {\n      @include _header-link-style;\n    }\n\n    .nhsuk-header__menu-list {\n      border-top: 1px solid nhsuk-colour(\"grey-5\");\n    }\n  }\n\n  // When header and navigation have the same background colour:\n  // - Until tablet breakpoint, add negative top margin\n  // - From tablet breakpoint, add a top border\n  .nhsuk-header__navigation-container {\n    box-shadow: 0 -1px 0 0 $nhsuk-reverse-border-colour;\n\n    .nhsuk-header--white .nhsuk-header__navigation--white & {\n      box-shadow: 0 -1px 0 0 $nhsuk-border-colour;\n    }\n\n    .nhsuk-header--white :not(.nhsuk-header__navigation--white) &,\n    .nhsuk-header__navigation--white & {\n      margin-top: 0;\n      box-shadow: none;\n    }\n\n    &,\n    .nhsuk-header--white .nhsuk-header__navigation--white & {\n      @include nhsuk-media-query($until: tablet) {\n        margin-top: math.div($nhsuk-gutter, 2) * -1;\n        box-shadow: none;\n      }\n    }\n  }\n\n  // White header variant\n\n  .nhsuk-header--white {\n    color: $nhsuk-brand-colour;\n    background-color: nhsuk-colour(\"white\");\n\n    .nhsuk-header__service-logo,\n    .nhsuk-header__service-name[href],\n    .nhsuk-header__account-button,\n    .nhsuk-header__account-link {\n      @include _header-link-style;\n    }\n\n    .nhsuk-header__service-logo:not(:focus):not(:hover) .nhsuk-header__organisation-name {\n      color: $nhsuk-text-colour;\n    }\n\n    .nhsuk-header__account {\n      border-color: $nhsuk-border-colour;\n      background-color: nhsuk-colour(\"grey-5\");\n    }\n\n    .nhsuk-header__account-item {\n      outline-color: $nhsuk-border-colour;\n    }\n\n    .nhsuk-header__search-form .nhsuk-input:not(:focus),\n    // Deprecated, to be removed in v11.0\n    .nhsuk-header__search-input:not(:focus) {\n      margin-right: -1px;\n      padding-right: $_header-item-padding;\n      padding-left: $_header-item-padding - 1px;\n      border-width: 1px;\n      border-color: nhsuk-colour(\"grey-3\");\n    }\n\n    .nhsuk-header__search-form .nhsuk-button,\n    // Deprecated, to be removed in v11.0\n    .nhsuk-header__search-submit {\n      color: $nhsuk-reverse-text-colour;\n      background-color: $nhsuk-header-item-colour;\n\n      &:hover,\n      &:active {\n        border-color: $nhsuk-header-item-hover-colour;\n        background-color: $nhsuk-header-item-hover-colour;\n      }\n\n      &:active {\n        background-color: $nhsuk-header-item-active-colour;\n      }\n    }\n  }\n\n  // Organisation header variant\n\n  .nhsuk-header--organisation {\n    .nhsuk-header__logo {\n      width: nhsuk-px-to-rem(60px);\n      min-width: auto;\n      height: nhsuk-px-to-rem(24px);\n      margin-bottom: nhsuk-px-to-rem(6px);\n\n      @include nhsuk-media-query($from: tablet) {\n        width: nhsuk-px-to-rem(80px);\n        height: nhsuk-px-to-rem(32px);\n      }\n    }\n\n    .nhsuk-header__service-logo {\n      display: block;\n\n      // Adjust SVG logo underline position\n      &:has(svg):not(:focus):hover::before {\n        width: nhsuk-px-to-rem(60px);\n        height: nhsuk-px-to-rem(24px);\n\n        @include nhsuk-media-query($from: tablet) {\n          width: nhsuk-px-to-rem(80px);\n          height: nhsuk-px-to-rem(32px);\n        }\n      }\n    }\n  }\n\n  .nhsuk-header__organisation-name {\n    display: block;\n    @include nhsuk-font(22, $weight: bold, $line-height: 1.1);\n  }\n\n  .nhsuk-header__organisation-name-split {\n    display: block;\n  }\n\n  .nhsuk-header__organisation-name-descriptor {\n    display: block;\n    @include nhsuk-font(14, $weight: bold);\n  }\n\n  .nhsuk-header__organisation-logo {\n    width: nhsuk-px-to-rem(280px);\n    height: auto;\n    border: 0;\n\n    @include nhsuk-media-query($until: 450px) {\n      max-width: nhsuk-px-to-rem(150px);\n    }\n\n    &[src$=\".svg\"] {\n      width: nhsuk-px-to-rem(220px);\n      max-width: nhsuk-px-to-rem(220px);\n    }\n  }\n\n  // Remove service name underline\n  .nhsuk-header .nhsuk-header__service-name[href] {\n    text-decoration: none;\n  }\n\n  // Add service logo underline on hover\n  .nhsuk-header .nhsuk-header__service-logo:not(:focus):hover,\n  .nhsuk-header .nhsuk-header__service-logo:not(:focus):hover .nhsuk-header__service-name,\n  .nhsuk-header .nhsuk-header__service-name[href]:not(:focus):hover {\n    text-decoration: underline;\n  }\n\n  // Add service logo box shadow on focus\n  .nhsuk-header .nhsuk-header__service-logo:focus {\n    @include nhsuk-focused-box;\n  }\n}\n"]}