@import "bourbon";
@import "neat";
@import "grid-settings";
@import "tfl-lib";

.tfl-grid-container {
  @include grid-container;
  @include grid-collapse();

  .tfl-grid-item {
    min-height: 1px; /* Prevents columns from collapsing when housing absolute elements or when lazy loading content */
  }


  @include grid-media($tfl-mobile-only-grid) {
    &.tfl-grid-mobile-2 {
      .tfl-grid-item {
        @include omega(2n);
      }
    }

    &.tfl-grid-mobile-3 {
      .tfl-grid-item {
        @include omega(3n);
      }
    }

    &.tfl-grid-mobile-4 {
      .tfl-grid-item {
        @include omega(4n);
      }
    }

    &.tfl-grid-mobile-5 {
      .tfl-grid-item {
        @include omega(5n);
      }
    }

    &.tfl-grid-mobile-6 {
      .tfl-grid-item {
        @include omega(6n);
      }
    }
  }

  @include grid-media($tfl-tablet-only-grid) {
    &.tfl-grid-tablet-2 {
      .tfl-grid-item {
        @include omega(2n);
      }
    }

    &.tfl-grid-tablet-3 {
      .tfl-grid-item {
        @include omega(3n);
      }
    }

    &.tfl-grid-tablet-4 {
      .tfl-grid-item {
        @include omega(4n);
      }
    }

    &.tfl-grid-tablet-5 {
      .tfl-grid-item {
        @include omega(5n);
      }
    }

    &.tfl-grid-tablet-6 {
      .tfl-grid-item {
        @include omega(6n);
      }
    }
  }
  @include grid-media($tfl-desktop-grid) {
    &.tfl-grid-desktop-2 {
      .tfl-grid-item {
        @include omega(2n);
      }
    }

    &.tfl-grid-desktop-3 {
      .tfl-grid-item {
        @include omega(3n);
      }
    }

    &.tfl-grid-desktop-4 {
      .tfl-grid-item {
        @include omega(4n);
      }
    }

    &.tfl-grid-desktop-5 {
      .tfl-grid-item {
        @include omega(5n);
      }
    }

    &.tfl-grid-desktop-6 {
      .tfl-grid-item {
        @include omega(6n);
      }
    }
  }


  &.tfl-grid-mobile-1 {

    .tfl-grid-item {
      @include grid-column(12);
    }
  }

  &.tfl-grid-mobile-2 {

    .tfl-grid-item {
      @include grid-column(6);
    }
  }

  &.tfl-grid-mobile-3 {

    .tfl-grid-item {
      @include grid-column(4);
    }
  }

  &.tfl-grid-mobile-4 {

    .tfl-grid-item {
      @include grid-column(3);
    }
  }

  &.tfl-grid-mobile-5 {

    .tfl-grid-item {
      @include grid-column(1, $tfl-five-col-grid);
    }
  }

  &.tfl-grid-mobile-6 {

    .tfl-grid-item {
      @include grid-column(2);
    }
  }

  @include grid-media($tfl-tablet-grid) {

    &.tfl-grid-tablet-1 {

      .tfl-grid-item {
        @include grid-column(12);
      }
    }
    &.tfl-grid-tablet-2 {

      .tfl-grid-item {
        @include grid-column(6);
      }
    }

    &.tfl-grid-tablet-3 {

      .tfl-grid-item {
        @include grid-column(4);
      }
    }

    &.tfl-grid-tablet-4 {

      .tfl-grid-item {
        @include grid-column(3);
      }
    }

    &.tfl-grid-tablet-5 {

      .tfl-grid-item {
        @include grid-column(1, $tfl-five-col-grid);
      }
    }

    &.tfl-grid-tablet-6 {

      .tfl-grid-item {
        @include grid-column(2);
      }
    }
  }

  @include grid-media($tfl-desktop-grid) {

    &.tfl-grid-desktop-1 {

      .tfl-grid-item {
        @include grid-column(12);
      }
    }
    &.tfl-grid-desktop-2 {

      .tfl-grid-item {
        @include grid-column(6);
      }
    }

    &.tfl-grid-desktop-3 {

      .tfl-grid-item {
        @include grid-column(4);
      }
    }

    &.tfl-grid-desktop-4 {

      .tfl-grid-item {
        @include grid-column(3);
      }
    }

    &.tfl-grid-desktop-5 {

      .tfl-grid-item {
        @include grid-column(1, $tfl-five-col-grid);
      }
    }

    &.tfl-grid-desktop-6 {

      .tfl-grid-item {
        @include grid-column(2);
      }
    }
  }
}

/*--------- Gapless grid columns ----*/

.tfl-gapless-grid {

  .tfl-grid-container {
    margin-left: 0;
    margin-right: 0;
    width: auto;

    &.tfl-grid-mobile-1 {

      .tfl-grid-item {
        @include grid-column(12, $tfl-gapless-grid);
      }
    }

    &.tfl-grid-mobile-2 {

      .tfl-grid-item {
        @include grid-column(6, $tfl-gapless-grid);
      }
    }

    &.tfl-grid-mobile-3 {

      .tfl-grid-item {
        @include grid-column(4, $tfl-gapless-grid);
      }
    }

    &.tfl-grid-mobile-4 {

      .tfl-grid-item {
        @include grid-column(3, $tfl-gapless-grid);
      }
    }

    &.tfl-grid-mobile-5 {
      .tfl-grid-item {
        @include grid-column(1, $tfl-gapless-five-col-grid);
      }
    }

    &.tfl-grid-mobile-6 {

      .tfl-grid-item {
        @include grid-column(2, $tfl-gapless-grid);
      }
    }

    @include grid-media($tfl-tablet-grid) {

      &.tfl-grid-tablet-1 {
        .tfl-grid-item {
          @include grid-column(12, $tfl-gapless-grid);
        }
      }

      &.tfl-grid-tablet-2 {
        .tfl-grid-item {
          @include grid-column(6, $tfl-gapless-grid);
        }
      }

      &.tfl-grid-tablet-3 {
        .tfl-grid-item {
          @include grid-column(4, $tfl-gapless-grid);
        }
      }
      &.tfl-grid-tablet-4 {
        .tfl-grid-item {
          @include grid-column(3, $tfl-gapless-grid);
        }
      }
      &.tfl-grid-tablet-5 {
        .tfl-grid-item {
          @include grid-column(1, $tfl-gapless-five-col-grid);
        }
      }
      &.tfl-grid-tablet-6 {
        .tfl-grid-item {
          @include grid-column(2, $tfl-gapless-grid);
        }
      }
    }

    @include grid-media($tfl-desktop-grid) {

      &.tfl-grid-desktop-1 {
        .tfl-grid-item {
          @include grid-column(12, $tfl-gapless-grid);
        }
      }

      &.tfl-grid-desktop-2 {
        .tfl-grid-item {
          @include grid-column(6, $tfl-gapless-grid);
        }
      }

      &.tfl-grid-desktop-3 {
        .tfl-grid-item {
          @include grid-column(4, $tfl-gapless-grid);
        }
      }
      &.tfl-grid-desktop-4 {
        .tfl-grid-item {
          @include grid-column(3, $tfl-gapless-grid);
        }
      }
      &.tfl-grid-desktop-5 {
        .tfl-grid-item {
          @include grid-column(1, $tfl-gapless-five-col-grid);
        }
      }
      &.tfl-grid-desktop-6 {
        .tfl-grid-item {
          @include grid-column(2, $tfl-gapless-grid);
        }
      }
    }
  }
}

/* ---------- Masonry Layout Grid columns -------------*/

.tfl-gapless-grid .tfl-masonry {

  /* Clear the omega for masonry layout */
  .tfl-grid-item {
    clear: none !important;
  }

  .tfl-grid-sizer {
    @include grid-column(1, $tfl-gapless-grid);
  }

  &.tfl-grid-mobile-1 {

    .tfl-grid-item.tfl-wide {
      @include grid-column(12, $tfl-gapless-grid);
    }
  }

  &.tfl-grid-mobile-2 {

    .tfl-grid-item.tfl-wide {
      @include grid-column(6, $tfl-gapless-grid); // keep it small for now
    }
  }

  &.tfl-grid-mobile-3 {

    .tfl-grid-item.tfl-wide {
      @include grid-column(8, $tfl-gapless-grid);
    }
  }

  &.tfl-grid-mobile-4 {

    .tfl-grid-item.tfl-wide {
      @include grid-column(6, $tfl-gapless-grid);
    }
  }

  &.tfl-grid-mobile-5 {

    .tfl-grid-item.tfl-wide {
      @include grid-column(2, $tfl-gapless-five-col-grid);
    }
  }

  &.tfl-grid-mobile-6 {

    .tfl-grid-item.tfl-wide {
      @include grid-column(4, $tfl-gapless-grid);
    }
  }

  @include grid-media($tfl-tablet-grid) {

    &.tfl-grid-tablet-1 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(12, $tfl-gapless-grid);
      }
    }
    &.tfl-grid-tablet-2 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(6, $tfl-gapless-grid); // keep it small for now
      }
    }

    &.tfl-grid-tablet-3 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(8, $tfl-gapless-grid);
      }
    }

    &.tfl-grid-tablet-4 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(6, $tfl-gapless-grid);
      }
    }

    &.tfl-grid-tablet-5 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(2, $tfl-gapless-five-col-grid);
      }
    }

    &.tfl-grid-tablet-6 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(4, $tfl-gapless-grid);
      }
    }

  }

  @include grid-media($tfl-desktop-grid) {


    &.tfl-grid-desktop-1 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(12, $tfl-gapless-grid);
      }
    }
    &.tfl-grid-desktop-2 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(6, $tfl-gapless-grid); // keep it small for now
      }
    }

    &.tfl-grid-desktop-3 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(8, $tfl-gapless-grid);
      }
    }

    &.tfl-grid-desktop-4 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(6, $tfl-gapless-grid);
      }
    }

    &.tfl-grid-desktop-5 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(2, $tfl-gapless-five-col-grid);
      }
    }

    &.tfl-grid-desktop-6 {

      .tfl-grid-item.tfl-wide {
        @include grid-column(4, $tfl-gapless-grid);
      }
    }
  }
}

/* ------- RTL Grid Styles ------ */

.rtl {

  .tfl-grid-container {

    &.tfl-grid-mobile-1, &.tfl-grid-mobile-2, &.tfl-grid-mobile-3, &.tfl-grid-mobile-4, &.tfl-grid-mobile-5, &.tfl-grid-mobile-6 {

      .tfl-grid-item {
        float: right;
        margin-left: 0;
        margin-right: $tfl-default-gutter;
      }
    }

    @include grid-media($tfl-tablet-grid) {

      &.tfl-grid-tablet-1, &.tfl-grid-tablet-2, &.tfl-grid-tablet-3, &.tfl-grid-tablet-4, &.tfl-grid-tablet-5, &.tfl-grid-tablet-6 {
        .tfl-grid-item {
          float: right;
          margin-left: 0;
          margin-right: $tfl-default-gutter;
        }
      }
    }

    @include grid-media($tfl-desktop-grid) {

      &.tfl-grid-desktop-1, &.tfl-grid-desktop-2, &.tfl-grid-desktop-3, &.tfl-grid-desktop-4, &.tfl-grid-desktop-5, &.tfl-grid-desktop-6 {
        .tfl-grid-item {
          float: right;
          margin-left: 0;
          margin-right: $tfl-default-gutter;
        }
      }
    }
  }

  .tfl-gapless-grid {

    .tfl-grid-container {
      &.tfl-grid-mobile-1, &.tfl-grid-mobile-2, &.tfl-grid-mobile-3, &.tfl-grid-mobile-4, &.tfl-grid-mobile-5, &.tfl-grid-mobile-6 {

        .tfl-grid-item {
          float: right;
          margin-right: 0;
        }
      }

      @include grid-media($tfl-tablet-grid) {

        &.tfl-grid-tablet-1, &.tfl-grid-tablet-2, &.tfl-grid-tablet-3, &.tfl-grid-tablet-4, &.tfl-grid-tablet-5, &.tfl-grid-tablet-6 {
          .tfl-grid-item {
            float: right;
            margin-right: 0;
          }
        }
      }

      @include grid-media($tfl-desktop-grid) {

        &.tfl-grid-desktop-1, &.tfl-grid-desktop-2, &.tfl-grid-desktop-3, &.tfl-grid-desktop-4, &.tfl-grid-desktop-5, &.tfl-grid-desktop-6 {
          .tfl-grid-item {
            float: right;
            margin-right: 0;
          }
        }
      }
    }
  }

  .tfl-gapless-grid .tfl-masonry {

    .tfl-grid-sizer {
      float: right;
      margin-right: 0;
    }

    &.tfl-grid-mobile-1, &.tfl-grid-mobile-2, &.tfl-grid-mobile-3, &.tfl-grid-mobile-4, &.tfl-grid-mobile-5, &.tfl-grid-mobile-6 {

      .tfl-grid-item.tfl-wide {
        float: right;
        margin-right: 0;
      }
    }

    @include grid-media($tfl-tablet-grid) {

      &.tfl-grid-tablet-1, &.tfl-grid-tablet-2, &.tfl-grid-tablet-3, &.tfl-grid-tablet-4, &.tfl-grid-tablet-5, &.tfl-grid-tablet-6 {
        .tfl-grid-item.tfl-wide {
          float: right;
          margin-right: 0;
        }
      }
    }

    @include grid-media($tfl-desktop-grid) {

      &.tfl-grid-desktop-1, &.tfl-grid-desktop-2, &.tfl-grid-desktop-3, &.tfl-grid-desktop-4, &.tfl-grid-desktop-5, &.tfl-grid-desktop-6 {
        .tfl-grid-item.tfl-wide {
          float: right;
          margin-right: 0;
        }
      }
    }
  }
}