@import (reference) "../variables/legacy-variables.less";
@import (reference) "./mixins/_clearfix.less";
@import (reference) "./mixins/_grid.less";
@import (reference) "./mixins/_grid-framework.less";
@import (reference) "./mixins/_logical-properties.less";

// Set the container width, and override it for fixed navbars in media queries.
.container {
  .container-fixed();
  .clearfix ();

  @media (min-width: @screen-xl-min) {
    max-width: @container-xl;
  }

  padding-right: @spacing-1-mobile;
  padding-left: @spacing-1-mobile;

  @media (min-width: @screen-sm-min) {
    padding-right: @spacing-1-tablet;
    padding-left: @spacing-1-tablet;
  }

  @media (min-width: @screen-lg-min) {
    padding-right: @spacing-1-desktop;
    padding-left: @spacing-1-desktop;
  }
}

// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
  .container-fixed();
}

// Rows contain and clear the floats of your columns.
.row {
  .make-row();
  .clearfix ();
}

// Common styles for small and large grid columns
.make-grid-columns();

// Columns, offsets, pushes, and pulls for extra small devices like smartphones.
.make-grid(xs);

// Columns, offsets, pushes, and pulls for the small device range, from phones to tablets.
@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}

// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
  .make-grid(md);
}

// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}

// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-xl-min) {
  .make-grid(xl);
}

@media (max-width: @screen-xs-max) {
  .container {
    padding-right: @spacing-1-mobile;
    padding-left: @spacing-1-mobile;
  }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .container {
    padding-right: @spacing-1-tablet;
    padding-left: @spacing-1-tablet;
  }
}

[class*="col-sm"],
[class*="col-md"],
[class*="col-lg"],
[class*="col-xl"] {
  margin-bottom: calc(var(--size-8) * 2);
}

[class*="col-xs"] {
  margin-bottom: 0;
}

@media (min-width: @screen-sm-min) {
  [class*="col-sm"] {
    margin-bottom: 0;
  }
}

@media (min-width: @screen-md-min) {
  [class*="col-md"] {
    margin-bottom: 0;
  }
}

@media (min-width: @screen-lg-min) {
  [class*="col-lg"] {
    margin-bottom: 0;
  }
}

@media (min-width: @screen-xl-min) {
  [class*="col-xl"] {
    margin-bottom: 0;
  }
}

.row-equal-height {
  display: flex;
  flex-wrap: wrap;

  > [class*="col-"] {
    display: flex;
  }

  @media (max-width: @screen-xs-max) {
    .col-xs-12 {
      margin-bottom: var(--size-12);
    }
  }
}

// Make grid gutters smaller on mobile
@media (max-width: @screen-xs-max) {
  .row {
    margin-right: calc(var(--size-8) * -1);
    margin-left: calc(var(--size-8) * -1);
  }

  [class*="col-"] {
    padding-right: var(--size-8);
    padding-left: var(--size-8);
  }
}

.make-grid-columns-wide(@gutter: @grid-gutter-width) {
  margin-right: -@gutter / 2;
  margin-left: -@gutter / 2;

  [class*="col-"] {
    padding-right: @gutter / 2;
    padding-left: @gutter / 2;
  }
}

.row--wide {
  .make-grid-columns-wide();

  @media all and (min-width: @screen-sm) {
    .make-grid-columns-wide(@grid-gutter-width * 2);
  }

  @media all and (min-width: @screen-lg) {
    .make-grid-columns-wide(@grid-gutter-width * 4);
  }
}

.container--fullscreen {
  @media (min-width: @screen-xl-min) {
    max-width: 100%;
  }
}

.container--text {
  max-width: 700px;
  margin-right: auto;
  margin-left: auto;
}

.container--wide {
  max-width: 1500px;
  margin-right: auto;
  margin-left: auto;

  @media (min-width: @screen-xl-min) {
    max-width: 1500px;
  }
}