@import '../base/grid-settings';
@import 'neat/neat'; // lib - Neat

$facet-text-color: #3d3e3f;
$facet-background-color: #007db8;

.find-courses, .university-profile {
  background: $course-profile-bg;
  padding-bottom: ($baseline*3);

  .discovery-button:not(:disabled) {
    @extend %t-action2;
    outline: 0 none;
    box-shadow:none;
    border: 0;
    background: none;
    padding: 0 ($baseline*0.6);
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;

    //STATE: hover
    &::hover {
      background: none;
    }
  }

  .courses-container {

    #discovery-form {
      * {
        display:inline;
      }

      #discovery-message,
      #loading-indicator {
        @include line-height(37.84);
      }
    }

    .courses {
      @include rtl() { $layout-direction: "RTL"; }

      .courses-listing .courses-listing-item {
        @include fill-parent();
        margin: ($baseline*0.75) 0 ($baseline*1.5) 0;
        max-height: $course-card-height;
      }

      /* Style grid settings if course discovery turned on */
      &:not(.no-course-discovery) {
        @include span-columns(9);

        @include media($bp-medium) {
          @include span-columns(4);
        }

        @include media($bp-large) {
          @include span-columns(8);
        }

        @include media($bp-huge) {
          @include span-columns(9);
        }

        .courses-listing .courses-listing-item {
          @include media($bp-medium) {
            @include span-columns(8); // 4 of 8
            @include omega(1n);
          }

          @include media($bp-large) {
            @include span-columns(6); // 6 of 12
            @include omega(2n);
          }

          @include media($bp-huge) {
            @include span-columns(4); // 4 of 12
            @include omega(3n);
          }
        }
      }

      /* Style grid settings if course discovery turned off */
      &.no-course-discovery{
        @include span-columns(12);

        @include media($bp-medium) {
          @include span-columns(8);
        }

        @include media($bp-large) {
          @include span-columns(12);
        }

        @include media($bp-huge) {
          @include span-columns(12);
        }

        .courses-listing .courses-listing-item {
          @include media($bp-medium) {
            @include span-columns(4); // 4 of 8
            @include omega(2n);
          }

          @include media($bp-large) {
            @include span-columns(4); // 4 of 12
            @include omega(3n);
          }

          @include media($bp-huge) {
            @include span-columns(3); // 3 of 12
            @include omega(4n);
          }
        }
      }
    }
  }

  header.search {
    background: $course-profile-bg;
    background-size: cover;
    background-image: $homepage-bg-image;
    background-position: center top !important;
    border-bottom: 1px solid $border-color-3;
    box-shadow: inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3);
    height: 430px;
    margin-top: $header_image_margin;
    width: 100%;

    .inner-wrapper {
      height: 120px;
      margin: 0 auto;
      max-width: 1200px;
      padding-top: ($baseline*10);
      position: relative;
      text-align: center;
      width: flex-grid(12);

      > hgroup {
        background: $white;
        background: $course-header-bg;
        border: 1px solid $border-color-3;
        box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
        padding: $baseline ($baseline*1.5);
        position: relative;
        z-index: 2;
      }

      &.main-search, &.university-search {
        text-align: center;

        hgroup {
          display: inline-block;
        }

        .logo {
          display: inline-block;
          @include border-right(1px solid $light-gray);
          height: 80px;
          @include margin-right(30px);
          @include padding-right(30px);
          position: relative;
          vertical-align: middle;

          &::after {
            content: "";
            display: block;
            height: 80px;
            position: absolute;
            right: 0px;
            top: 0px;
          }

          img {
            height: 100%;
          }
        }

        h1 {
          color: $base-font-color;
          font-family: $sans-serif;
          font-style: italic;
          font-weight: 800;
          letter-spacing: 0px;
          text-transform: none;
        }

        h1, h2 {
          display: inline-block;
          letter-spacing: 1px;
          margin-bottom: 0;
          text-shadow: 0 1px rgba(255,255,255, 0.8);
          vertical-align: middle;
        }
      }
    }
  }

  section.message {
    border-top: 1px solid $border-color-2;
    @include clearfix();
    margin-top: $baseline;
    padding-top: ($baseline*3);
    @include columns(2 20px);
  }

  .discovery-input {
    @extend %ui-depth1;
    @extend %t-icon4;
    @extend %t-demi-strong;
    @include border-radius(0);
    @include border-top-left-radius(3px);
    @include border-bottom-left-radius(3px);
    border: 2px solid $gray-l3;
    height: $course-search-input-height;
    color: $black;
    font-style: normal;

    //STATE: focus
    &:focus {
      @extend %no-outline;
      box-shadow: none;
      border-color: $m-blue-d1;
    }
  }

  .discovery-submit {
    @extend %ui-depth2;
    @extend %t-icon3;
    @extend %t-strong;
    @include margin-left(-2px);
    position: relative;
    border: 2px solid $m-blue-d1;
    border-radius: ($baseline*0.1);
    box-shadow: none;
    background: $m-blue-d5;
    padding: 0 ($baseline*0.7);
    height: $course-search-input-height;
    color: $white;
    text-shadow: none;

    //STATE: hover, focus
    &:hover, &:focus {
      background: $m-blue-l1;
    }
  }

  .filters {
    @include clearfix();
    margin-top: ($baseline/2);
    border-top: 1px solid $courseware-button-border-color;
    border-bottom: 1px solid $courseware-button-border-color;
    width: 100%;
    height: auto;
    max-height: ($baseline*10);

    ul {
      @include padding-left(0);
      margin: 0;
      list-style: outside none none;
    }

    li {
      @include float(left);
      @include margin(($baseline/2), $baseline, ($baseline/2), 0);
      position: relative;
      padding: ($baseline/2) ($baseline*0.75);
      background: $courseware-button-border-color;
      width: auto;

      .facet-option {
        @extend %t-strong;
        color: $gray-d2;
        text-decoration: none;

        i {
          color: $gray-l2;
        }
      }
    }

    .clear-filters {
      @include line-height(29.73);
      @extend %t-icon5;
      @extend %t-strong;
      margin: ($baseline/2) 0;
      width: auto;
      text-align: center;
      color: $m-blue-d1;
    }

    .flt-right {
      @include float(right);
    }
  }



  .search-facets{
    @include fill-parent();
    @include omega();
    @include box-sizing(border-box);
    @extend %ui-depth1;
    position: relative;
    margin: ($baseline*2) 0 ($baseline*3.5) 0;
    box-shadow: 1px 2px 5px $black-t0;
    border-top: 1px solid $black;
    border-bottom: 2px solid $black;
    background-color: $white;
    max-height: ($baseline*100);

    @include media($bp-tiny) {
      @include span-columns(4);
    }

    @include media($bp-small) {
      @include span-columns(3);
    }

    @include media($bp-medium) {
      @include span-columns(4);
    }

    @include media($bp-large) {
      @include span-columns(4);
    }

    @include media($bp-huge) {
      @include span-columns(3);
    }

    &.phone-menu {
      border: medium none;
      padding: 0;
      overflow: visible;
    }

    &:before {
      @include right(0);
      position: absolute;
      top: (-$baseline*0.15);
      opacity: 0;
      background-color: $white;
      padding: ($baseline*2) ($baseline*0.75) 0 ($baseline*0.75);
      width: ($baseline*2.5);
      height: ($baseline/4);
      content: "";
    }

    h2,
    section {
      @extend %t-icon5;
      @extend %t-strong;
      margin: 0 ($baseline/2);
      border: medium none;
      padding: ($baseline/2);
      color: $facet-text-color;
      font-family: $sans-serif;
      text-transform: none;
    }

    h3 {
      @extend %t-icon6;
      @extend %t-strong;
      margin: 0 ($baseline/2) ($baseline/2) ($baseline/2);
      color: $facet-text-color;
      font-family: $sans-serif;
    }

    section {
      margin: 0;
      padding: ($baseline/2) 0;
    }

    .facet-option {
      @include float(left);
      @include box-sizing(border-box);
      @include line-height(18.92);
      @include transition(all $tmg-f2 ease-out 0s);
      @extend %t-action3;
      opacity: 1;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: $facet-text-color;

      //STATE: hover, visited
      &:hover,
      &:visited {
        color: $facet-text-color;
        text-decoration: none;
      }
    }

    ul {
      margin: 0;
      padding: 0;
      overflow: hidden;
      list-style: outside none none;

      &.collapse {
        max-height: ($baseline*14);
      }

      li {
        @include clearfix();
        @include line-height(18.92);
        @extend %t-icon6;
        position: relative;
        clear: both;
        border-top: 1px solid $white;
        padding: 0;
        height: ($baseline*1.5);
        overflow: hidden;

        .count {
          @include right($baseline*0.6);
          @include box-sizing(border-box);
          @include transition(all 0.2s ease-out);
          @include line-height(18.92);
          position: absolute;
        }

        //STATE: hover
        &:hover {
          background: $facet-background-color;
          color: $white;
          text-decoration: none;

          .count,
          .facet-option {
            color: $white;
          }
        }
      }
    }

    .search-facets-lists section {
      border-top: 1px solid $courseware-button-border-color;
    }

    .toggle {
      @include clearfix();

      button {
        @extend %t-icon6;
        @extend %t-strong;
        color: $facet-background-color;
      }
    }
  }
}
