ministryofjustice/peoplefinder

$search-button-size: 40px;

.mod-search{
  $search-button-size: 40px;

  // border: 3px solid red;
  .mod-search-form{
    @extend %contain-floats;
    // margin-bottom: 30px;
    .form-group{
      margin-bottom:0;
    }
    @if ($is-ie == false) or ($ie-version >= 8) {

      .mod-search-input-wrapper {
        @include box-sizing(border-box);
        padding-right: $search-button-size;
        margin-right: -$search-button-size;
      }

      .mod-search-input {
        @include box-sizing(border-box);
        @include appearance(none);

        position: relative;
        height: $search-button-size;
        margin: 0;

        border: 2px solid $text-colour;
        outline-offset: 0;
        border-width: 2px 0 2px 2px;
        }

      .mod-search-submit {
        @include box-sizing(border-box);
        height: $search-button-size;
        width: $search-button-size;

        cursor: pointer;

        overflow: hidden;
        text-indent: -5000px;
        background: $black image-url("search-button.png") no-repeat 2px 50%;

        @include device-pixel-ratio() {
          background-size: 52.5px 35px;
          background-position: 115% 50%;
        }

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

        &:focus {
          z-index: 15;
          position: relative;
        }

        @include border-radius(0);
      }

      // If JS is enabled, and browser is not IE6 or IE7, position label
      // as a placeholder
      .js-enabled & {
        position: relative;
        background: $white;

        // Absolutely position the label behind the input
        label {
          @include core-19($line-height: 40px, $line-height-640: 40px);
          position: absolute;
          left: 0;
          top: 1px;
          z-index: 5;

          text-indent: 15px;

          color: $secondary-text-colour;

          @include mobile(portrait){
            @include core-14($line-height: 40px, $line-height-640: 40px);
            left: -5px;
          }
        }

        // Input is transparent and sits above the label
        .mod-search-input {
          position: relative;
          z-index: 10;

          // Internet Explorer does not play well with "empty" elements. The
          // label behind the text box becomes selectable (i.e. it acts as if
          // the input is not there.) Setting a background image fixes it.
          // http://stackoverflow.com/questions/2098714/input-boxes-with-transparent-background-are-not-clickable-in-ie8
          // http://stackoverflow.com/questions/9109911/ie-z-index-trouble-on-element-with-transparent-background
          background: transparent url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');

          // Javascript adds a confusingly named `focus` class to the input
          // when it contains text. We use this to set the background to
          // white, hiding the label.
          &:focus,
          &.focus {
            background: $white;
          }
        }
      }
    }
  }

  .mod-search-input-wrapper {
    float: left;
    width: 100%;
  }

  .mod-search-input {
    width: 100%;
    margin: 0.5em 0;
    padding: $gutter/5;

    @include core-19($line-height: (28 / 19), $line-height-640: (28 / 16));
  }

  .mod-search-submit {
    float: left;
    padding: $gutter/5;
    background: $black;
    color: $white;
    border: 0;
  }

}