@import "variables";
@import "mixins";

@mixin wpbs-search {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  .wpbs_s-search-widget .wpbs_s-search-widget-form {
    background: $black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: (1.5rem * 1.6) 0 !important;
    .wpbs_s-search-widget-field {
      flex: 1 0;
      // background: transparent url(theme-url("/assets/svg/icon-awesome-calendar-check.svg")) no-repeat 1rem center !important;
      margin: 1em 2em !important;

      @include bp("md") {
        flex: 1 0 100%;
        max-width: 100%;
      }
      &.wpbs_s-search-widget-field-submit {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100% !important;
        display: inline-block !important;
        float: none;
      }
      label {
        @include inplace-label;
        background: linear-gradient(transparent 0%, $gray900 50%, transparent 100%);
        color: $white;
        font-size: 1.4rem !important;
        // font-family: $font-family-secondary;
        font-weight: $fw-light !important;
        margin-left: 6.6rem !important;
        padding: 0 1rem !important;
      }
      input[type="text"],
      input[type="number"] {
        max-width: calc(100% - 6rem) !important;
        margin-left: 6rem !important;
        background: none !important;
        padding: 2em 2em !important;
        color: $white;
        cursor: pointer;
        border: 1px solid $white !important;
        // font-family: $font-family-secondary !important;
        font-weight: $fw-bold;
        &::placeholder,
        &::-moz-placeholder {
          color: $white;
        }
      }
      input[type="number"] {
        height: 4.4rem !important;
      }
      button.wpbs_s-search-widget-datepicker-submit {
        background-color: $col-prm !important;
        color: $white !important;
        padding: $btn-pd !important;
        border-radius: $btn-br !important;
        border-width: $btn-bw !important;
        border-color: $col-prm !important;
        font-weight: $fw-bold !important;
        transition: $trans !important;

        border-style: solid !important;
        display: inline-block !important;
        text-decoration: none !important;
        height: auto !important;
        line-height: 1.3 !important;
        @include bp("md") {
          padding: $btn-pd-mobile !important;
          width: 100% !important;
        }
        &:hover {
          background-color: $white !important;
          border-color: $white !important;
          transition: $trans-h !important;
          color: $gray900 !important;
        }
      }
    }
  }
  .wpbs_s-search-widget[data-results_layout="list"] {
    position: relative;
    .wpbs_s-search-widget-results-wrap {
      padding: 0 !important;
      h2 {
        display: none !important;
      }
      .wpbs_s-search-widget-results {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 200;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        z-index: 200;
        .close {
          text-align: right;
          font-style: inherit;
          color: red;
          cursor: pointer;
        }
        &:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: -1;
        }
      }
    }
  }
  .wpbs_s-search-widget .wpbs_s-search-widget-error-field {
    position: absolute;
    bottom: (1rem * 1.6);
    font-weight: $fw-bold !important;
  }
}
