@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/search") {
  .app-search {
    margin-left: auto;

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

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

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

    @include govuk-link-style-inverse;

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

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

    .app-search:defined & {
      display: none;
    }
  }

  .app-search__wrapper {
    background-color: govuk-colour("white");
    display: block;
    position: relative;

    .govuk-service-navigation & {
      outline: 1px solid govuk-functional-colour(border);
    }

    .govuk-service-navigation--inverse & {
      outline: 1px solid transparent;
    }
  }

  .app-search__hint,
  .app-search__input {
    appearance: none;
    border-color: transparent;
    padding-left: $_icon-size - govuk-spacing(1);
    width: 100%;
  }

  .app-search__hint {
    color: govuk-colour("black", $variant: "tint-80");
    position: absolute;
  }

  .app-search__input {
    background-color: transparent;
    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-functional-colour(secondary-text);
    }
  }

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

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

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

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

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

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

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

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

  .app-search__option {
    border-bottom: solid govuk-functional-colour(border);
    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-search__option--odd {
    background-color: #fafafa;
  }

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

    .app-search__option-metadata {
      color: inherit;
    }
  }

  .app-search__option--no-results {
    background-color: govuk-colour("white");
    color: govuk-functional-colour(secondary-text);
    cursor: not-allowed;
  }

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

  .app-search__option-metadata {
    color: govuk-functional-colour(secondary-text);
    display: block;
    margin-top: govuk-spacing(1);

    @include govuk-font($size: 16);
  }
}