<commit_before>@import "common";
@import "foundation/components/grid";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/inline-block";

// Styles for the Extensions search interface

.search_bar {
  background-color: #c8d4e4;
  border: none;
  padding: rem-calc(50 55);
}

@media #{$mobile-only} {
  .search_bar {
    padding: rem-calc(20);
  }
}

@media #{$small-only} {
  .search_bar {
    padding: rem-calc(20);
  }
}

@media #{$xlarge-up} {
  .search_bar {
    padding: rem-calc(40 0);
  }
}

.search_form {
  @include grid-row();
  position: relative;
  max-width: $max-width;
}

.search_toggle {
  @include grid-column($columns: 2, $collapse: true);

  .divider {
    float: left;
    height: rem-calc(56);
    border-left: 2px solid #e7e7e7;
    margin-top: rem-calc(4);
  }

  .button {
    color: #797979;
    font-size: rem-calc(18);
    height: rem-calc(64);
    line-height: rem-calc(64);
    overflow: hidden;
    padding: 0;
    background-color: white;

    i {
      padding-left: rem-calc(5);
    }
  }
}

@media #{$small-only} {
  .search_toggle {
    @include grid-column($columns: 2, $collapse: true);
  }
}

@media #{$mobile-only} {
  .search_toggle {
    @include grid-column($columns: 2, $collapse: true);
  }
}

.search_field {
  @include grid-column($columns: 8, $collapse: true);
  position: relative;

  .fa {
    color: lighten($primary_gray, 5%);
    font: {
      family: "fontawesome" !important;
      size: rem-calc(24);
    }
    left: rem-calc(25);
    position: absolute;
    top: rem-calc(20);
    z-index: 2;
  }
}

@media #{$small-only} {
  .search_field {
    @include grid-column($columns: 7, $collapse: true);
  }
}

@media #{$mobile-only} {
  .search_field {
    @include grid-column($columns: 7, $collapse: true);
  }
}

.search_button {
  @include grid-column($columns: 2, $collapse: true);
}

@media #{$small-only} {
  .search_button {
    @include grid-column($columns: 2, $collapse: true);
  }
}

@media #{$mobile-only} {
  .search_button {
    @include grid-column($columns: 3, $collapse: true);
  }
}

input[type="search"].extension_search_textfield {
  background-color: white;
  border: none;
  @include border-left-radius(rem-calc(3));
  @include box-shadow(none);
  color: #797979;
  font: rem-calc(24) $accent_font;
  height: rem-calc(64);
  line-height: rem-calc(44);
  margin: 0;
  padding: rem-calc(0 0 0 60);<commit_msg>Hide search placeholder on mobile<commit_after>@import "common";
@import "foundation/components/grid";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/inline-block";

// Styles for the Extensions search interface

.search_bar {
  background-color: #c8d4e4;
  border: none;
  padding: rem-calc(50 55);
}

@media #{$mobile-only} {
  .search_bar {
    padding: rem-calc(20);
  }
}

@media #{$small-only} {
  .search_bar {
    padding: rem-calc(20);
  }
}

@media #{$xlarge-up} {
  .search_bar {
    padding: rem-calc(40 0);
  }
}

.search_form {
  @include grid-row();
  position: relative;
  max-width: $max-width;
}

.search_toggle {
  @include grid-column($columns: 2, $collapse: true);

  .divider {
    float: left;
    height: rem-calc(56);
    border-left: 2px solid #e7e7e7;
    margin-top: rem-calc(4);
  }

  .button {
    color: #797979;
    font-size: rem-calc(18);
    height: rem-calc(64);
    line-height: rem-calc(64);
    overflow: hidden;
    padding: 0;
    background-color: white;

    i {
      padding-left: rem-calc(5);
    }
  }
}

@media #{$small-only} {
  .search_toggle {
    @include grid-column($columns: 2, $collapse: true);
  }
}

@media #{$mobile-only} {
  .search_toggle {
    @include grid-column($columns: 2, $collapse: true);
  }
}

.search_field {
  @include grid-column($columns: 8, $collapse: true);
  position: relative;

  .fa {
    color: lighten($primary_gray, 5%);
    font: {
      family: "fontawesome" !important;
      size: rem-calc(24);
    }
    left: rem-calc(25);
    position: absolute;
    top: rem-calc(20);
    z-index: 2;
  }
}

@media #{$small-only} {
  .search_field {
    @include grid-column($columns: 7, $collapse: true);
  }
}

@media #{$mobile-only} {
  .search_field {
    @include grid-column($columns: 7, $collapse: true);

    .tt-input::-webkit-input-placeholder {
      color: white !important;
    }
    .tt-input:-moz-placeholder {
      color: white !important;
    }
    .tt-input::-moz-placeholder {
      color: white !important;
    }
    .tt-input:-ms-input-placeholder {
      color: white !important;
    }
  }
}

.search_button {
  @include grid-column($columns: 2, $collapse: true);
}

@media #{$small-only} {
  .search_button {
    @include grid-column($columns: 2, $collapse: true);
  }
}

@media #{$mobile-only} {
  .search_button {
    @include grid-column($columns: 3, $collapse: true);
  }
}

input[type="search"].extension_search_textfield {
  background-color: white;
  border: none;
  @include border-left-radius(rem-calc(3));
  @include box-shadow(none);
  color: #797979;
  font: rem-calc(24) $accent_font;
  height: rem-calc(64);
  line-height: rem-calc(44);
  margin: 0;
  padding: rem-calc(0 0 0 60);
{'fraction_non_alphanumeric': 0.1745693826204761, 'fraction_numerical': 0.028643313334623572, 'mean_word_length': 3.1610305958132043, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2002766', 'n_tokens_mistral': 2037, 'n_tokens_neox': 1944, 'n_words': 393}