@forward "node_modules/accessible-autocomplete/src/autocomplete";

@include govuk-exports("govuk-prototype-components/component/autocomplete") {
  // Ensure the autocomplete uses the correct typeface
  .autocomplete__wrapper {
    font-family: $govuk-font-family;
  }

  .autocomplete__input {
    font-family: inherit;
  }

  // Style the autocomplete if there’s an error
  .govuk-form-group--error {
    .autocomplete__input {
      border-color: govuk-functional-colour(error);
    }

    .autocomplete__input--focused {
      border-color: govuk-functional-colour(input-border);
    }
  }

  .autocomplete__dropdown-arrow-down {
    // Ensure dropdown arrow can be clicked
    // https://github.com/alphagov/accessible-autocomplete/issues/202
    pointer-events: none;
    // Ensure dropdown arrow can be seen
    z-index: 0;
  }
}

@include govuk-exports("govuk-prototype-components/component/masthead") {
  .x-govuk-masthead {
    @include govuk-responsive-padding(4, "bottom");
    background-color: govuk-functional-colour(surface-background);
    padding-top: 0.1px; // Prevent margin collapse

    .govuk-phase-banner {
      border-bottom-color: govuk-functional-colour(surface-border);
    }

    .govuk-tag {
      background-color: govuk-functional-colour(surface-border);
      color: govuk-functional-colour(text);
    }

    &.x-govuk-masthead--inverse {
      background-color: govuk-functional-colour(brand);
      color: govuk-colour("white");

      .govuk-phase-banner__content {
        color: govuk-colour("white");
      }

      .govuk-phase-banner__content a {
        @include govuk-link-style-inverse;
      }

      .govuk-phase-banner .govuk-tag {
        background-color: govuk-colour("white");
        color: govuk-functional-colour(brand);
      }
    }
  }

  .x-govuk-masthead__title {
    @include govuk-font($size: 48, $weight: "bold");
    @include govuk-responsive-margin(6, "bottom");
    @include govuk-responsive-margin(6, "top");
  }

  .x-govuk-masthead__description {
    @include govuk-font($size: 24);
    @include govuk-responsive-margin(6, "bottom");

    .x-govuk-masthead--inverse & {
      color: govuk-colour("white");

      a {
        @include govuk-link-style-inverse;
      }
    }
  }

  .x-govuk-masthead__image {
    @include govuk-responsive-padding(6, "top");

    img {
      max-width: 100%;
    }
  }

  .x-govuk-masthead__image--hide-on-mobile {
    @include govuk-media-query($until: desktop) {
      display: none;
    }
  }
}

@include govuk-exports("govuk-prototype-components/component/related-navigation") {
  .x-govuk-related-navigation {
    border-top: 2px solid govuk-functional-colour(brand);
    color: govuk-functional-colour(text);
  }

  .x-govuk-related-navigation__main-heading {
    @include govuk-font(19, $weight: bold);
    margin-bottom: govuk-spacing(2);
    margin-top: govuk-spacing(3);
  }

  .x-govuk-related-navigation__sub-heading {
    @include govuk-font(16);
    margin: 0;
    padding-top: govuk-spacing(3);
  }

  .x-govuk-related-navigation__sub-heading--footer {
    @include govuk-font(19, $weight: bold);
    border-top: 0;
    margin-bottom: govuk-spacing(2);
    margin-top: govuk-spacing(3);
    padding-top: 0;
  }

  .x-govuk-related-navigation__main-heading + .x-govuk-related-navigation__sub-heading {
    border-top: 0;
    padding-top: 0;
  }

  .x-govuk-related-navigation__nav-section {
    border-top: 1px solid govuk-functional-colour(border);
    margin-bottom: govuk-spacing(6);

    &:first-child {
      border-top: none;
    }
  }

  .x-govuk-related-navigation__link-list {
    list-style: none;
    margin: 0;
    margin-bottom: 1.25em;
    padding: 0;
  }

  .x-govuk-related-navigation__link {
    @include govuk-font($size: 16, $weight: regular, $line-height: 1.45);
    list-style-type: none;
    margin-top: govuk-spacing(3);

    @include govuk-media-query($from: tablet) {
      line-height: 1.28;
    }
  }

  .x-govuk-related-navigation__section-link {
    font-weight: bold;
  }

  .x-govuk-related-navigation__section-link--other {
    font-weight: normal;
  }
}

$_current-link-border-width: govuk-spacing(1);

@include govuk-exports("govuk-prototype-components/component/secondary-navigation") {
  .x-govuk-secondary-navigation {
    border-bottom: 1px solid govuk-functional-colour(border);
  }

  .x-govuk-secondary-navigation__link {
    @include govuk-link-common;
    @include govuk-link-style-no-underline;
    @include govuk-link-style-no-visited-state;
  }

  .x-govuk-secondary-navigation__list {
    @include govuk-font(19);
    list-style: none;
    margin: 0;
    margin-bottom: govuk-spacing(3);
    padding: 0;

    @include govuk-media-query($from: tablet) {
      align-items: start;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0;
    }

    // IE11 trips over flexbox and doesn’t wrap anything, making all of the items
    // into a single, horizontally scrolling row. This CSS hack removes the
    // flexbox definition for IE 10 & 11, reverting it a non-flexbox version.
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      display: block;
    }
  }

  .x-govuk-secondary-navigation__list-item {
    border: 0 solid govuk-functional-colour(link);
    margin: govuk-spacing(2) 0;
    position: relative;

    @include govuk-media-query($from: tablet) {
      margin-bottom: 0;
      margin-top: 0;
      padding: govuk-spacing(4) 0;

      &:not(:last-child) {
        @include govuk-responsive-margin(6, $direction: right);
      }
    }
  }

  .x-govuk-secondary-navigation__list-item--current {
    @include govuk-media-query($until: tablet) {
      border-left-width: $_current-link-border-width;
      // Negative offset the left margin so we can place a current page indicator
      // to the left without misaligning the list item text.
      margin-left: ((govuk-spacing(2) + $_current-link-border-width) * -1);
      padding-left: govuk-spacing(2);
    }

    @include govuk-media-query($from: tablet) {
      border-bottom-width: $_current-link-border-width;
      padding-bottom: govuk-spacing(4) - $_current-link-border-width;
    }
  }
}

@include govuk-exports("govuk-prototype-components/component/sub-navigation") {
  .x-govuk-sub-navigation {
    @include govuk-font(16);
  }

  .x-govuk-sub-navigation__section {
    list-style-type: none;
    margin: 0 0 govuk-spacing(4);
    padding: 0;
  }

  .x-govuk-sub-navigation__link {
    @include govuk-link-common;
    @include govuk-link-style-no-visited-state;
    @include govuk-link-style-no-underline;
    padding-bottom: govuk-spacing(1);
    padding-top: govuk-spacing(1);

    &:not(:focus):hover {
      color: govuk-functional-colour(link);
    }
  }

  .x-govuk-sub-navigation__section-item {
    margin-bottom: govuk-spacing(1);
    padding-bottom: govuk-spacing(1);
    padding-top: govuk-spacing(1);
  }

  .x-govuk-sub-navigation__section-item--current {
    $_current-indicator-width: 4px;
    background-color: govuk-functional-colour(body-background);
    border-left: $_current-indicator-width solid govuk-functional-colour(brand);
    margin-left: -(govuk-spacing(2) + $_current-indicator-width);
    padding-left: govuk-spacing(2);
  }

  .x-govuk-sub-navigation__link[aria-current] {
    font-weight: bold;
  }

  .x-govuk-sub-navigation__section--nested {
    margin-bottom: 0;
    margin-top: govuk-spacing(2);
    padding-left: govuk-spacing(4);
  }

  .x-govuk-sub-navigation__section--nested .x-govuk-sub-navigation__section-item::before {
    color: govuk-functional-colour(secondary-text);
    content: "—";
    margin-left: -(govuk-spacing(4));
  }

  .x-govuk-sub-navigation__theme {
    @include govuk-font(19);
    color: govuk-functional-colour(secondary-text);
    margin: 0;
    padding: govuk-spacing(2) govuk-spacing(3) govuk-spacing(2) 0;

    &:first-of-type {
      padding-top: 0;
    }
  }
}