@import "general-mixins";
@import "media-queries";
$form-padding: 0.5rem;

@mixin basic-omnisearch (
  $background-color: $nypl-white,
  $border: 0,
  $border-radius: ($general-border-radius * 2),
  $padding: $form-padding) {
  background-color: $background-color;
  border: $border;
  border-radius: $border-radius;
  padding: $padding;
  }

@mixin nypl-omnisearch {
  @include basic-omnisearch(
    $background-color: $nypl-white,
    $border: solid 0.0625rem $nypl-dark-gray,
    $border-radius: $general-border-radius,
    $padding: 0);
  font-weight: 400;
  height: 3rem;

  @include media($mobile-breakpoint) {
    width: 97%;
  }

  button,
  input,
  .nypl-omni-fields {
    display: block;
    float: left;
    height: 2rem;
  }

  ::placeholder {
    color: $nypl-dark-gray;
    opacity: 1;
  }

  legend {
    display: none;
    height: 0;
    width: 0;
  }

  .nypl-omni-fields {
    background-color: $nypl-white;
    border-right: $general-border-width / 1.5 solid $nypl-dark-gray;
    margin-left: 0.25rem;
    padding-right: 0.25rem;
    position: relative;
    top: 0.475rem;
    width: 28%;

    @include media($mobile-breakpoint) {
      font-size: 0.9rem;
      margin-left: 0.25rem;
      padding-right: 0.25rem;
      width: 28%;
    } // /mobile-breakpoint

    label {
      @include screenreader-only;
    }

    select {
      @include select;
      border-radius: 0;
      border-right: $general-border-width / 1.5;
      background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3LjY5OTA1IiBoZWlnaHQ9IjMuOTg3MTMiIHZpZXdCb3g9IjAgMCA3LjY5OTA1IDMuOTg3MTMiPgogIDx0aXRsZT5kb3duLjIud2VkZ2U8L3RpdGxlPgogIDxwb2x5bGluZSBwb2ludHM9IjcuMzk1IDAuMzYgMy44NSAzLjM3IDAuMzA0IDAuMzU4IiBmaWxsPSIjZmZmIiBzdHJva2U9IiMyMzFmMjAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIwLjk0MDUiLz4KPC9zdmc+) no-repeat 95% $nypl-white;
      background-color: $nypl-white;
      text-overflow: ellipsis;
  }
} // /.nypl-omni-fields

  input[type=text],
  input[type=email],
  input[type=number] {
    @include input;
    margin: 0 1%;
    text-indent: $form-padding;
}

  input[type=text] {
    background: $nypl-white;
    position: relative;
    width: 50%;
    top: 0.475rem;

    @include media($mobile-breakpoint) {
      width: 45%;
    }
  }

  input[type=submit] {
    background: $nypl-blue;
    border: 0;
    border-radius: 0.0625rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: $nypl-white;
    float: right;
    height: 3rem;
    position: relative;
    width: 15%;

    @include media($mobile-breakpoint) {
      font-size: $small-type;
      width: 20%;
    }

    &:hover,
    &:focus {
      background-color: $nypl-white;
      border: solid 0.0625rem $nypl-blue;
      color: $nypl-blue;
    }
  }

  svg {
    display: inline-block;
    fill: $nypl-dark-gray;
    height: 1.3125rem;
    margin-left: 93.5%;
    position: relative;
    top: -1.9rem;
    width: 0.9375rem;
  }
}

//
// needs a better name, this widget is the remains of the breadcrumbs & save record button below the search field...
// Possibly make this its own mixin?
//
.search-control {
  color: $nypl-dark-gray;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  margin-top: 1.75rem;

  @include media($mobile-breakpoint) {
    margin-top: 0.5rem;
  }
//
// Back to results link
// svg back arrow
//
  svg {
    fill: $nypl-gray-cool;
    height: 2rem;
    position: relative;
    width: 0.5625rem;
    top: 0.7rem;
  }

  a {
    color: $nypl-dark-gray;
    margin-left: 0.5rem;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
} // /nypl-omnisearch



// Override for the omnisearch div to work as a fieldset and
// allow focus on the search button.
// TODO: Integrate this a little better
div.nypl-omnisearch {

  &.nypl-spinner-field {
    overflow: inherit;
  }

  &.spinning {
    overflow: hidden;
  }
}