//
// Grid system
// --------------------------------------------------


// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin: 0;
  display: flex;
  flex-direction: column;

  @media (min-width: @screen-sm-min) {
    max-width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    max-width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    max-width: @container-lg;
  }
}

// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.

.container-fluid {
  .container-fixed();
}


// Row
//
// Rows contain and clear the floats of your columns.

.row {
  display: flex;
  flex-wrap: wrap;
  .make-row();
}

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

.row-no-gutters {
  margin-right: 0;
  margin-left: 0;
  display: flex;
  flex-wrap: wrap;

  [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}


// Columns
//

[class*="col-"] {
  display: flex;
  flex-direction: column;

  label {
    align-self: start;
  }
}
// Common styles for small and large grid columns

.make-grid-columns();


// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

.make-grid(xs);


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: @screen-md-min) {
  .make-grid(md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}

.layout--size-xs {
  --layout-size-height-context: var(--layout-size-height-xs, 1.5rem);
  --layout-size-height: var(--layout-size-height-context);
}

.layout--size-sm {
  --layout-size-height-context: var(--layout-size-height-sm, 2rem);
  --layout-size-height: var(--layout-size-height-context);
}

.layout--size-md {
  --layout-size-height-context: var(--layout-size-height-md, 2.5rem);
  --layout-size-height: var(--layout-size-height-context);
}

.layout--size-lg {
  --layout-size-height-context: var(--layout-size-height-lg, 3rem);
  --layout-size-height: var(--layout-size-height-context);
}

.layout--size-xl {
  --layout-size-height-context: var(--layout-size-height-xl, 4rem);
  --layout-size-height: var(--layout-size-height-context);
}

.layout--size-2xl {
  --layout-size-height-context: var(--layout-size-height-2xl, 5rem);
  --layout-size-height: var(--layout-size-height-context);
}
