@import "../../base";

@include govuk-exports("govuk/component/header") {
  $govuk-header-background: govuk-functional-colour(brand);
  $govuk-header-text: govuk-colour("white");
  $govuk-header-link-underline-thickness: 3px;
  $govuk-header-logo-bottom-margin: 2px;

  .govuk-header {
    @include govuk-font($size: 16, $line-height: 1);

    // Add a transparent bottom border for forced-colour modes
    border-bottom: 1px solid transparent;
    color: $govuk-header-text;
    background: $govuk-header-background;
  }

  .govuk-header__container--full-width {
    padding: 0 govuk-spacing(3);
  }

  .govuk-header__logo {
    box-sizing: border-box;

    // Magic numbers, set padding to vertically centre align the logo
    padding-top: 16px;
    padding-bottom: 14px - $govuk-header-logo-bottom-margin;
  }

  .govuk-header__homepage-link {
    // Avoid using the `govuk-link-common` mixin because the links in the
    // header get a special treatment, because:
    //
    // - underlines are only visible on hover
    // - all links get a 3px underline regardless of text size, as there are
    //   multiple grouped elements close to one another and having slightly
    //   different underline widths looks unbalanced
    //
    // Font size needs to be set on the link so that the box sizing is correct
    // in Firefox
    display: inline;
    margin-right: govuk-spacing(2);
    font-size: 30px; // We don't have a mixin that produces 30px font size
    text-decoration: none;
    // Remove word-spacing from within the logo so we can ignore
    // whitespace characters in the HTML
    word-spacing: govuk-px-to-rem(-6px);
    // Reset word-spacing for child elements
    > * {
      word-spacing: 0;
    }
    @include govuk-link-style-inverse;

    &:link,
    &:visited {
      text-decoration: none;
    }

    &:hover,
    &:active {
      // Negate the added border
      margin-bottom: $govuk-header-link-underline-thickness * -1;
      border-bottom: $govuk-header-link-underline-thickness solid;
    }

    &:hover {
      text-decoration: underline;
      text-decoration-thickness: $govuk-header-link-underline-thickness;

      @if $govuk-link-underline-offset {
        text-underline-offset: $govuk-link-underline-offset;
      }
    }

    &:focus {
      // Remove any borders that show when focused and hovered.
      margin-bottom: 0;
      border-bottom: 0;

      @include govuk-focused-text;
    }

    &:not(:focus) {
      background-color: $govuk-header-background;
    }
  }

  .govuk-header__logotype {
    display: inline-block;
    position: relative;
    top: -3px;

    // Add a gap after the logo in case it's followed by a product name. This
    // gets removed later if the logotype is a :last-child.
    margin-right: govuk-px-to-rem(7px); // 1 'dot'
    // Add bottom margin to space Product name on small viewports
    margin-bottom: $govuk-header-logo-bottom-margin;
    fill: currentcolor;
    vertical-align: top;

    // Prevent readability backplate from obscuring underline in Windows High
    // Contrast Mode
    @media (forced-colors: active) {
      forced-color-adjust: none;
      color: linktext;
    }

    // Remove the gap after the logo if there's no product name to keep hover
    // and focus states neat
    &:last-child {
      margin-right: 0;
    }
  }

  // Colour in the Dot
  .govuk-logo-dot {
    fill: govuk-colour("teal", "accent");

    // Override Dot colour when printing
    @media print {
      fill: currentcolor;
    }

    // Override Dot colour on forced colours mode
    @media (forced-colors: active) {
      fill: currentcolor;
    }

    // Override Dot colour on focus
    :focus & {
      fill: currentcolor;
    }
  }

  .govuk-header__product-name {
    display: inline-table;

    // Remove 1px from the bottom to account for the font-size being 1px
    // larger than the logo height.
    margin-bottom: govuk-px-to-rem(-1px);

    // Magic number font-size that visually aligns with GOV.UK logo.
    // Also stops reducing the product name size on narrow screens
    font-size: govuk-px-to-rem(31px);

    // Reduce letter spacing
    letter-spacing: -0.015em;

    // Align vertically with logo when not wrapped
    vertical-align: top;

    // Prevent forced colour modes from applying a background colour behind
    // the product name, which cuts off the underline that appears on hover.
    forced-color-adjust: none;

    @media screen and (forced-colors: active) {
      color: LinkText;
      background: transparent;
    }
  }

  @media print {
    .govuk-header {
      border-bottom-width: 0;
      color: govuk-colour("black");
      background: transparent;
    }

    .govuk-header__homepage-link {
      &:link,
      &:visited {
        color: govuk-colour("black");
      }

      // Do not append link href to GOV.UK link when printing (e.g. '(/)')
      &::after {
        display: none;
      }
    }

    .govuk-header__product-name {
      // Fix product name alignment in Firefox when printing
      @-moz-document url-prefix() {
        margin-top: 2px;
      }
    }
  }
}

/*# sourceMappingURL=_index.scss.map */