@import "01-variables/04-variables-grid-layout.scss";
@import "01-variables/01-variables-breakpoints.scss";

/* =============================================================================================================================
    Grid Layout
   ============================================================================================================================= */

/*
 *  Basic Grid Layout
 *
 *  Usage:
 *   Define rows and columns (apply .float_layout to wrapper element)
 *   .row will be -$grid-padding
 *   .column will be +$grid-padding
 *
 */

.ws-layout--float {
  width: 90%;
  max-width: $layout-max-width;
  margin-right: auto;
  margin-left: auto;

  // row wraps columns
  .row {
    margin-left: -$gutter-small;
    margin-right: -$gutter-small;
    &.collapse {
      margin-left: 0px;
      margin-right: 0px;
    }
  }

  // columns wrap content
  .column {
    float: left;
    padding-left: $gutter-small;
    padding-right: $gutter-small;
    &.collapse {
      padding-left: 0px;
      padding-right: 0px;
    }
    &:last-child:not(:first-child) {
      float: right;
    }
  }

  .large-12 {
    width: 100%;
  }

  .large-11 {
    width: 91.66667%;
  }

  .large-10 {
    width: 83.33333%;
  }

  .large-9 {
    width: 75%;
  }

  .large-8 {
    width: 66.66667%;
  }

  .large-7 {
    width: 58.33333%;
  }

  .large-6 {
    width: 50%;
  }

  .large-5 {
    width: 41.66667%;
  }

  .large-4 {
    width: 33.33333%;
  }

  .large-3 {
    width: 25%;
  }

  .large-2 {
    width: 16.66667%;
  }

  .large-1 {
    width: 8.33333%;
  }

  @media print, screen and (max-width: $breakpoint-mobile-large) {
    .medium-12 {
      width: 100%;
    }

    .medium-11 {
      width: 91.66667%;
    }

    .medium-10 {
      width: 83.33333%;
    }

    .medium-9 {
      width: 75%;
    }

    .medium-8 {
      width: 66.66667%;
    }

    .medium-7 {
      width: 58.33333%;
    }

    .medium-6 {
      width: 50%;
    }

    .medium-5 {
      width: 41.66667%;
    }

    .medium-4 {
      width: 33.33333%;
    }

    .medium-3 {
      width: 25%;
    }

    .medium-2 {
      width: 16.66667%;
    }

    .medium-1 {
      width: 8.33333%;
    }
  }

  @media print, screen and (max-width: $breakpoint-mobile-small) {
    .small-12 {
      width: 100%;
    }

    .small-11 {
      width: 91.66667%;
    }

    .small-10 {
      width: 83.33333%;
    }

    .small-9 {
      width: 75%;
    }

    .small-8 {
      width: 66.66667%;
    }

    .small-7 {
      width: 58.33333%;
    }

    .small-6 {
      width: 50%;
    }

    .small-5 {
      width: 41.66667%;
    }

    .small-4 {
      width: 33.33333%;
    }

    .small-3 {
      width: 25%;
    }

    .small-2 {
      width: 16.66667%;
    }

    .small-1 {
      width: 8.33333%;
    }
  }
}