// floating form
.groupex-form-full,
.news-more-teaser form.views-exposed-form,
.listing-event-posts form.views-exposed-form,
.blog-more-teaser form.views-exposed-form {
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 3px 30px 2px rgba($black, 0.15);
  background-color: $white;
  width: 100%;
  margin-bottom: 50px;

  .exposed-form-flex-wrapper > div {
    margin-bottom: 0;
  }
}

// subfilters below header banners
// (programs, sub-programs)
#schedules-search-form-wrapper,
.sub-header--filters,
.groupex-form-full,
.listing-news-posts,
.listing-event-posts,
.listing-blog-posts {
  padding-top: 30px;
  position: relative;
  z-index: 1;

  .controls-wrapper {
    @include media-breakpoint-up(lg) {
      display: none;
    }
  }

  // wrapper
  .exposed-form-flex-wrapper {
    @include media-breakpoint-up(lg) {
      margin: 0 -15px;
    }
  }

  // show/hide filters based on screen size
  .selects-container,
  .top-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    &.hidden-xs {
      @include media-breakpoint-down(md) {
        display: none;
      }
    }

    @include media-breakpoint-up(lg) {
      flex-direction: row;
      align-items: flex-end;
      padding: 0;
    }

    .container {
      @include media-breakpoint-down(md) {
        max-width: unset;
      }

      padding: 0;
    }
  }

  // form fields
  .form-item {
    margin: 0 0 15px 0;
    flex: 0 0 100%;
    width: 100%;
    position: relative;
    border-bottom: 1px solid $gray-100;

    @include media-breakpoint-up(lg) {
      padding: 0 15px;
      margin-bottom: 0;
      flex-basis: 0;
      flex-grow: 1;
      border: none;
    }

    .ajax-progress-throbber {
      position: absolute;
      margin: -20px 0 0 -15px;
      left: 50%;
      top: 50%;
    }

    .select-wrapper:before {
      color: $pink;
      font-size: 24px;
      top: 50%;
      margin-top: -18px;
    }

    label {
      @include cachet(500);
      font-size: 14px;
      line-height: 1.6;
      color: $gray-500;
      margin-bottom: 0;

      @include media-breakpoint-up(lg) {
        margin-bottom: 5px;
      }
    }

    .form-control,
    .form-checkbox {
      @include cachet();
      padding-left: 0;
      background: transparent;
      color: $gray-500;
      font-size: 14px;
      width: 100%;
      border: 0;
      height: calc(3.5rem + 2px) !important;
      letter-spacing: -1.2px;
      position: relative;

      &.form-select {
        text-transform: uppercase;
      }

      &.form-text:not(.hasDatepicker) {
        font-size: 16px;
        border-bottom: 1px solid $gray-100;
      }
    }

    .form-select {
      @include cachet();
      width: 100%;
      border: 1px solid $gray-100;
      border-radius: 8px;
      color: $gray-500;
      text-transform: uppercase;
      padding: 15px;
      font-size: 14px;
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    // date picker field
    &.js-form-item-date .input-wrapper {
      display: flex;
      align-items: center;

      &:after {
        content: '\f133';
        font-family: $font-awesome;
        font-weight: bold;
        padding-left: 5px;
      }
    }
  }

  // location field
  .js-form-type-select.js-form-item-location,
  .js-form-type-select.js-form-item-field-event-location-target-id-verf {
    border: none;

    @include media-breakpoint-up(lg) {
      min-width: 225px;
      max-width: 300px;
    }

    .select-wrapper:before {
      right: 15px;
    }

    select {
      @include cachet();
      width: 100%;
      border: 1px solid $gray-100;
      border-radius: 8px;
      color: $gray-500;
      text-transform: uppercase;
      padding: 15px;
      font-size: 14px;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
  }

  .form-actions {
    padding: 0;
    .btn-primary {
      padding: 16px;
    }
  }

  // buttons
  .actions-wrapper {
    display: none;
  }

  #submit-wrapper .input-wrapper {
    display: flex;
    justify-content: space-between;
  }

  // filters wrapper
  .filters-main-wrapper {
    clear: both;

    @include media-breakpoint-up(lg) {
      padding-top: 15px;
      padding-bottom: 15px;
    }
  }

  // filters (tags)
  .filters-container {
    clear: both;
    position: relative;
    border-top: 1px solid $gray-400;

    // hide filters below small desktop
    &.hidden {
      @include media-breakpoint-down(md) {
        display: none;
      }
    }

    @include media-breakpoint-down(md) {
      display: none;
    }

    // show filters below small desktop
    @include media-breakpoint-up(lg) {
      margin-top: 0;
      border: none;
      display: block;
    }

    .container {
      position: relative;
      padding: 0;
    }

    .filters-wrapper {
      padding-bottom: 5px;
      padding-top: 5px;

      @include media-breakpoint-up(lg) {
        padding-bottom: 0;
        padding-top: 0;
        border: 0;
      }

      .label {
        @include cachet();
        color: $gray-500;
        display: block;
        font-size: 14px;
        margin-right: 20px;
        padding: 0;
        text-align: left;

        @include media-breakpoint-up(lg) {
          display: inline-block;
        }
      }

      .filters {
        @include media-breakpoint-up(lg) {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }

        .filter {
          @include cachet();
          background: rgba($gray-100, .3);
          border-radius: 4px;
          color: $gray-500;
          display: inline-block;
          font-size: 12px;
          height: 30px;
          line-height: 30px;
          text-transform: uppercase;
          white-space: nowrap;
          padding: 0 10px;
          margin: 0 5px 10px 0;

          @include media-breakpoint-up(lg) {
            margin: 5px 20px 5px 0;
          }

          .remove {
            margin-left: 10px;
            line-height: 30px;

            @include media-breakpoint-up(lg) {
              margin-left: 15px;
            }

            .fa {
              font-size: 13px;
              color: $primary;

              &:hover {
                color: $pink;
              }

              @include media-breakpoint-up(lg) {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
}
