.finder--form {
  text-align: left;
  margin-top: $base-spacing;

  .dropdown {
    margin-bottom: gutter();

    @include media($tablet) {
      float: left;
      width: span(5 of 14);
      margin-bottom: 0;
    }

    &.small {
      @include media($tablet) {
        width: span(4 of 14);
      }
    }

    > .wrapper {
      background: #fff;
      min-height: 72px;
      margin: gutter();

      // TODO: Change to variable of breakpoint once new inbetween breakpoints determined.
      @include media("(min-width: 860px)") {
        min-height: 100%;
      }
    }

    li {
      float: left;
      clear: both;
      display: inline-block;
      position: relative;
      margin: 0;
      break-inside: avoid;

      &.checked label {
        background-color: $yellow;
      }

      &.disabled {
        color: $light-gray;
      }
    }

    .caret-toggle {
      color: $purple;
      cursor: pointer;
      padding: ($base-spacing / 2) 18px;
    }

    .__title {
      position: relative;
      font-weight: $weight-bold;
      line-height: 1;
      margin: 0;
      padding: 0 0 4px $base-spacing;

      &:before {
        @include icomoon-icon;
        position: absolute;
        z-index: 1; // fixes display issue with css3 columns in below container
        left: -8px;
        top: -8px;
        content: "\e607";
        font-size: 32px;
        transform: rotate(0deg);
        transition: transform 0.25s;
      }
    }

    .__question {
      color: $med-gray;
      font-size: $font-smaller;
      line-height: 1;
      padding-left: $base-spacing;
      margin: 0;
    }

    .dropdown-menu {
      display: block;
      max-height: 0;
      overflow: hidden;
      padding: 0 $base-spacing;
      transition: max-height 0.25s, padding 0.25s;

      ul {
        padding-left: 10px;
      }
    }

    // Dropdown open.
    &.open {
      .__title:before {
        transform: rotate(90deg);
      }

      .dropdown-menu {
        max-height: 500px;
        padding-bottom: $base-spacing;
      }
    }
  }

  .two-col {
    padding-left: $base-spacing;

    @include media("(min-width: 550px)") {
      column-count: 2;
    }

    @include media("(min-width: 768px) and (max-width: 1000px)") {
      column-count: 1;
    }
  }

  .campaign-search {
    text-align: center;
    margin-top: 27px;

    @include media($tablet) {
      display: none;
    }
  }

  .error {
    clear: both;
  }

  input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
  }

  label {
    clear: none;
    float: none;
    display: inline-block;
    height: auto;
    font-size: 14px;
    font-weight: $weight-normal;
    left: 0;
    line-height: 1.2;
    margin: 0;
    padding: 14px 9px;
    position: relative;
    cursor: pointer;
    transition: left 0.1s linear;

    @include media($tablet) {
      padding-bottom: 2px;
      padding-top: 2px;
    }
  }

  label:hover {
    left: 3px;
  }
}


.disabled label:hover,
.checked label:hover {
  left: 0;
}


.finder--results {
  position: relative;
  min-height: 300px;
  @include clearfix;

  &.-blankslate {
    .campaign-result:nth-child(6) {
      clear: both;
    }
  }

  &.loading {
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      z-index: 100;
      animation: fadeIn;
    }

    .spinner {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      height: 60px;
      width: 60px;
      margin-top: -30px;
      margin-left: -30px;
      z-index: 101;
    }
  }

  .spinner {
    display: none;
  }

  .no-result {
    background-color: $off-black;
    background-size: cover;
    text-align: center;
    min-height: 300px;
    width: 100%;

    > .wrapper {
      padding: 36px 18px;
      @include span(12);
      @include push(2);
    }

    p {
      color: $light-gray;
      margin-bottom: 1em;
    }

    .message {
      font-size: $font-large;
      line-height: 1.2;
      margin-bottom: 9px;

      @include media($tablet) {
        font-size: $font-larger;
      }
    }
  }

  .campaign-result {
    img {
      // lazy-load animation
      opacity: 0;
      transition: opacity 0.5s ease-in;
    }
  }

  .pagination-link {
    clear: both;
    width: 100%;
    background: #fff;
    text-align: center;
    padding: 18px;
  }
}
