// Taken from the GOVUK Design System site search stylesheet
@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;
}

@include digitalmarketplace-exports("digitalmarketplace/component/search-box") {
  $input-size: 40px;
  $large-input-size: 50px;

  .dm-search-box {
    position: relative;
    margin-bottom: 30px;
  }

  .dm-search-box__label {
    @include govuk-font($size: 19, $line-height: $input-size);
    display: block;
    color: $govuk-text-colour;
    background: govuk-colour("white");

    h1 {
      @include govuk-font($size: 19, $line-height: $input-size);
      margin: 0;
    }

    .js-enabled & {
      position: absolute;
      z-index: 1;
      top: 2px;
      bottom: 2px;
      left: 2px;
      padding-left: govuk-spacing(3);
      color: $govuk-secondary-text-colour;
    }

    // match label colour with the label component colour
    // when javascript is enabled and inline_label option  is set to false
    .js-enabled .dm-search-box--separate-label & {
      color: $govuk-text-colour;
    }
  }

  .dm-search-box__input[type="search"] {
    // overly specific to prevent some overrides from outside
    @include govuk-font($size: 19, $line-height: (28 / 19));
    box-sizing: border-box;
    width: 100%;
    height: $input-size;
    margin: 0;

    padding: 6px;
    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
    border-radius: 0; // otherwise iphones apply an automatic border radius
    background: govuk-colour("white");
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in
    &:focus,
    &.focus {
      z-index: 2;
    }

    &:focus {
      outline: $govuk-focus-width solid $govuk-focus-colour;
      // Ensure outline appears outside of the element
      outline-offset: 0;
      // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
      // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
    }
  }

  .dm-search-box__submit {
    position: relative;
    width: $input-size;
    height: $input-size;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    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('white'))}'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: $input-size $input-size;
    text-indent: -5000px;
    cursor: pointer;

    &:focus {
      z-index: 2;
      outline: $govuk-focus-width solid $govuk-focus-colour;
      // Ensure outline appears outside of the element
      outline-offset: 0;
      // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`.
      // This ensures consistency with the search input
      // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
      box-shadow: inset 0 0 0 $govuk-border-width-form-element * 2 govuk-colour("black");
    }

    &::-moz-focus-inner {
      border: 0;
    }
  }

  .dm-search-box__item-wrapper {
    display: table;
    width: 100%;
    background: govuk-colour("white");
  }

  // general class applied to search input and button wrapper
  .dm-search-box__item {
    display: table-cell;
    position: relative;
    vertical-align: top;
  }

  .dm-search-box__submit-wrapper {
    width: 1%;
  }

  .dm-search-box--on-govuk-blue {
    .dm-search-box__input {
      border-width: 0;

      // no need for black outline as there is enough contrast
      // with the blue background
      &:focus {
        box-shadow: none;
      }
    }

    .dm-search-box__submit {
      color: govuk-colour("white");
      background-color: govuk-colour("black");

      &:hover {
        background-color: lighten(govuk-colour("black"), 5%);
      }
    }

    .js-enabled & {
      .dm-search-box__label {
        color: $govuk-secondary-text-colour;
      }
    }
  }

  .dm-search-box--on-white {
    .dm-search-box__submit {
      color: govuk-colour("white");
      background-color: govuk-colour("blue");

      &:hover {
        background-color: lighten(govuk-colour("blue"), 5%);
      }
    }

    .dm-search-box__input[type="search"] {
      border-right-width: 0;

      // add the border once focused
      &:focus {
        border-right-width: 2px;
      }
    }
  }

  .dm-search-box--no-border {
    .dm-search-box__input[type="search"] {
      border: 0;
    }
  }

  .dm-search-box--separate-label {
    .dm-search-box__label {
      position: relative;
      top: auto;
      left: auto;
      padding-left: 0;
    }
  }

  .search-toggle {
    display: none;
    width: 36px;
    height: 30px;
    margin: -46px 0;
    padding: 0;
    float: right;
    overflow: hidden;
    border: 0;
    background-color: govuk-colour("blue");
    background-image: image-url("govuk_publishing_components/search-button.png");
    background-repeat: no-repeat;
    background-position: 0 50%;
    text-indent: -5000px;

    &:focus {
      border-width: 0;
      outline: $govuk-focus-width solid $govuk-focus-colour;
      outline-offset: 0;
      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
    }

    &:focus,
    &:hover {
      background-color: lighten(govuk-colour("blue"), 5%);
    }

    &.js-hidden {
      display: none;
    }

    @include govuk-media-query($from: tablet) {
      display: none;
    }

    @include govuk-media-query($until: tablet) {
      .js-enabled & {
        display: block;
      }
    }
  }
}

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