@use "govuk-frontend/dist/govuk" as *;

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

$_icon-size: 40px;

@include govuk-exports("govuk-eleventy-plugin/component/site-search") {
  .app-site-search {
    margin-left: auto;

    &:defined {
      margin-bottom: govuk-spacing(2);
      position: relative;
      width: 100%;

      @include govuk-media-query($from: desktop) {
        max-width: calc(33% - govuk-spacing(4));

        .govuk-template--rebranded &,
        .app-service-navigation & {
          margin-bottom: 0;
        }
      }
    }
  }

  .app-site-search__link {
    @include govuk-link-style-inverse;

    display: inline-block;
    padding-bottom: govuk-spacing(1);
    padding-top: govuk-spacing(1);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-decoration-thickness: 3px;
    }

    &:focus {
      @include govuk-focused-text;
    }
  }

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

    .app-service-navigation & {
      outline: 1px solid $govuk-border-colour;
    }
  }

  .app-site-search__hint,
  .app-site-search__input {
    -webkit-appearance: none;
    appearance: none;
    border: $govuk-border-width-form-element solid transparent;
    border-radius: 0; // Safari 10 on iOS adds implicit border rounding.
    box-sizing: border-box;
    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);
    width: 100%;
  }

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

  .app-site-search__input {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'><path 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='%23505a5f'></path></svg>");
    background-position: center left -2px;
    background-repeat: no-repeat;
    background-size: $_icon-size $_icon-size;
    position: relative;

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

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

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

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

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

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

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

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

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

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

    &:first-of-type {
      border-top-width: 0;
    }

    &:last-of-type {
      border-bottom-width: 0;
    }

    & > * {
      pointer-events: none;
    }
  }

  .app-site-search__option--odd {
    background-color: #fafafa;
  }

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

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

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

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

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

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

    &::before {
      content: "(";
    }

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

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