// Site search using Accessible autocomplete
// below styles are based on the default accessible autocomplete style sheet

@function encode-hex($hex) {
  // Turn colour into a string
  $output: inspect($hex);
  // Slice the '#' from the start of the string so we can add it back on encoded.
  $output: str-slice($output, 2);
  // Add the '#' back on the start, but as an encoded character for embedding.
  @return "%23" + $output;
}

$icon-size: 40px;

@include govuk-not-ie8 {
  .app-site-search {
    position: relative;
    width: 100%;
    margin-bottom: govuk-spacing(2);
    float: left;

    @include govuk-media-query($from: 900px) {
      float: right;
      margin: 0;
      margin-top: -5px; // Negative margin to vertically align search in header
      width: 300px;
    }

    .no-js & {
      display: none;

      @include govuk-media-query($from: 900px) {
        display: block;
      }

      @include govuk-media-query($from: 900px) {
        text-align: right;
      }
    }
  }

  .app-site-search__wrapper {
    display: block;
    position: relative;
  }

  .app-site-search__hint,
  .app-site-search__input {
    box-sizing: border-box;
    width: 100%;
    height: govuk-px-to-rem($icon-size);
    margin-bottom: 0; // BUG: Safari 10 on macOS seems to add an implicit margin.
    padding: govuk-spacing(1);
    padding-left: $icon-size - govuk-spacing(1);
    border: $govuk-border-width-form-element solid govuk-colour("white");
    border-radius: 0; // Safari 10 on iOS adds implicit border rounding.
    -webkit-appearance: none;
  }

  .app-site-search__hint {
    position: absolute;
    color: govuk-colour("mid-grey");
  }

  .app-site-search__input {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='#{encode-hex(govuk-colour("dark-grey"))}'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center left -2px;
    background-size: $icon-size $icon-size;

    &::placeholder {
      color: govuk-colour("dark-grey");
    }
  }

  .app-site-search__input--focused {
    border-color: $govuk-focus-text-colour;
    outline: $govuk-focus-width solid $govuk-focus-colour;
    outline-offset: 0;
    box-shadow: inset 0 0 0 $govuk-border-width-form-element;
  }

  .app-site-search__input--show-all-values {
    padding: govuk-spacing(1) 34px govuk-spacing(1) govuk-spacing(1);
    cursor: pointer;
  }

  .app-site-search__dropdown-arrow-down {
    display: inline-block;
    position: absolute;
    z-index: -1;
    top: govuk-spacing(2);
    right: 8px;
    width: 24px;
    height: 24px;
  }

  .app-site-search__menu {
    width: 100%;
    max-height: 342px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    border-top: 0;
    color: govuk-colour("black");
    background-color: govuk-colour("white");
  }

  .app-site-search__menu--visible {
    display: block;
  }

  .app-site-search__menu--hidden {
    display: none;
  }

  .app-site-search__menu--overlay {
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    box-shadow: rgba(govuk-colour("black"), .25) 0 2px 6px;
  }

  .app-site-search__menu--inline {
    position: relative;
  }

  .app-site-search__option {
    display: block;
    position: relative;
    padding: govuk-spacing(2);
    border-bottom: solid govuk-colour("mid-grey");
    border-width: 1px 0;
    cursor: pointer;
  }

  .app-site-search__option > * {
    pointer-events: none;
  }

  .app-site-search__option:first-of-type {
    border-top-width: 0;
  }

  .app-site-search__option:last-of-type {
    border-bottom-width: 0;
  }

  .app-site-search__option--odd {
    $_app-site-search-option-background-color: #fafafa;
    background-color: $_app-site-search-option-background-color;
  }

  .app-site-search__option--focused,
  .app-site-search__option:hover {
    border-color: govuk-colour("blue");
    // Add a transparent outline for when users change their colours.
    outline: 3px solid transparent;
    outline-offset: -3px;
    color: govuk-colour("white");
    background-color: govuk-colour("blue");

    .app-site-search--section {
      color: inherit;
    }
  }

  .app-site-search__option--no-results {
    color: govuk-colour("dark-grey");
    background-color: govuk-colour("white");
    cursor: not-allowed;
  }

  .app-site-search__hint,
  .app-site-search__input,
  .app-site-search__option {
    @include govuk-font($size: 19);
  }

  .app-site-search__link {
    display: none;

    .no-js & {
      @include govuk-media-query($from: 900px) {
        display: inline-block;
        margin-top: 10px;
        color: govuk-colour("white");

        &:focus {
          color: govuk-colour("black");
        }
      }
    }
  }

  .app-site-search--section {
    display: block;
    @include govuk-font($size: 16);
    color: $govuk-secondary-text-colour;
  }

  .app-site-search__aliases {
    margin-left: govuk-spacing(1);

    &:before {
      content: "(";
    }

    &:after {
      content: ")";
    }
  }

  .app-site-search__separator {
    display: inline-block;
    margin-right: govuk-spacing(1);
    margin-left: govuk-spacing(1);
  }
}

// on IE8 we show the sitemap link as Accessible autocomplete
// does not support it
@include govuk-if-ie8 {
  .app-site-search {
    width: 300px;
    margin: 0;
    margin-top: -6px;
    float: right;
    text-align: right;
  }

  .app-site-search__link:link {
    display: inline-block;
    margin-top: 10px;
    color: govuk-colour("white");

    &:focus {
      color: govuk-colour("black");
    }
  }
}