// ============================================================================
// :: Grid
// ============================================================================
/**
 * The grid layout is divided into columns and rows. By the use of flexbox the
 * layout is being manipulated by dividing it into columns. Once the width of
 * these columns exceeds the width of the container, the column will start on
 * a new row.
 *
 * The width of the grid can be divided into 12 columns. The sum of the width
 * of a full row of columns cannot exceed the 12 column limit in order for it
 * to completely fill the space.
 *
 * For example: col-1, col-3, col-3, col-4, col-1. The sum of these columns will
 * result into 12. All columns will be placed next to each other (on desktop) and
 * the space of the grid gets divided into these values. This means that col-3 will
 * take up 3/12 of the entire container, col-4 will take up 4/12 of the container
 * width and so on...
 *
 * Because of the use of breakpoints we can manipulate the grid further when the
 * viewport gets resized to handheld devices.
 *
 * By adding modifiers to the root element we give spacing in the form of margin
 * to the item and start subtracting its spacing from its width. Multiple
 * modifiers can be added to manipulate how these columns behave. The behaviour
 * of the component can also be changed when used within other components.
 */

// ============================================================================
// :: Settings
// ============================================================================
// The width of every column in a 12-column grid.
$_grid-col-1: 100% / 12;
$_grid-col-2: 100% / 6;
$_grid-col-3: 100% / 4;
$_grid-col-4: 33.3%;
$_grid-col-5: 100% / 12 * 5;
$_grid-col-6: 49.9%;
$_grid-col-7: 100% / 12 * 7;
$_grid-col-8: 66.5%;
$_grid-col-9: 100% / 12 * 9;
$_grid-col-10: 100% / 12 * 10;
$_grid-col-11: 100% / 12 * 11;
$_grid-col-12: 100%;

// ============================================================================
// :: Root
// ============================================================================
.l-grid {
  @extend %__grid-base;
}

// ============================================================================
// :: Elements - col & row
// ============================================================================
[class*="l-grid__col"] {
  @extend %__grid-col;
}

.l-grid__row {
  @extend %__grid-row;
}

// ============================================================================
// :: Elements - col
// ============================================================================
.l-grid__col-1-12 {
  @extend %__grid-col-1-12;
}

.l-grid__col-2-12 {
  @extend %__grid-col-2-12;
}

.l-grid__col-3-12 {
  @extend %__grid-col-3-12;
}

.l-grid__col-4-12 {
  @extend %__grid-col-4-12;
}

.l-grid__col-5-12 {
  @extend %__grid-col-5-12;
}

.l-grid__col-6-12 {
  @extend %__grid-col-6-12;
}

.l-grid__col-7-12 {
  @extend %__grid-col-7-12;
}

.l-grid__col-8-12 {
  @extend %__grid-col-8-12;
}

.l-grid__col-9-12 {
  @extend %__grid-col-9-12;
}

.l-grid__col-10-12 {
  @extend %__grid-col-10-12;
}

.l-grid__col-11-12 {
  @extend %__grid-col-11-12;
}

.l-grid__col-12-12 {
  @extend %__grid-col-12-12;
}

// ============================================================================
// :: Modifiers - with margins
// ============================================================================
/**
 * The --with-margins modifier adds horizontal and vertical margin or spacing
 * between every column.
 */
.l-grid--with-margins {
  @extend %__grid-with-margins-base;

  [class*="l-grid__col"] {
    @extend %__grid-with-margins-col;
  }

  .l-grid__col-1-12 {
    @extend %__grid-with-margins-col-1-12;
  }

  .l-grid__col-2-12 {
    @extend %__grid-with-margins-col-2-12;
  }

  .l-grid__col-3-12 {
    @extend %__grid-with-margins-col-3-12;
  }

  .l-grid__col-4-12 {
    @extend %__grid-with-margins-col-4-12;
  }

  .l-grid__col-5-12 {
    @extend %__grid-with-margins-col-5-12;
  }

  .l-grid__col-6-12 {
    @extend %__grid-with-margins-col-6-12;
  }

  .l-grid__col-7-12 {
    @extend %__grid-with-margins-col-7-12;
  }

  .l-grid__col-8-12 {
    @extend %__grid-with-margins-col-8-12;
  }

  .l-grid__col-9-12 {
    @extend %__grid-with-margins-col-9-12;
  }

  .l-grid__col-10-12 {
    @extend %__grid-with-margins-col-10-12;
  }

  .l-grid__col-11-12 {
    @extend %__grid-with-margins-col-11-12;
  }

  .l-grid__col-12-12 {
    @extend %__grid-with-margins-col-12-12;
  }
}

// ============================================================================
// :: Modifiers - with margins desktop
// ============================================================================
.l-grid--with-margins-desktop {
  @extend %__grid-with-margins-desktop;

  [class*="l-grid__col"] {
    @extend %__grid-with-margins-col-desktop;
  }
}

// ============================================================================
// :: Modifiers - normalize margins grid
// ============================================================================
.l-grid--normalize-with-margins {
  @extend %__grid-normalize-with-margins;

  .l-grid__col-6-12 {
    @extend %__grid-normalize-with-margins-col-6-12;
  }

  .l-grid__col-12-12 {
    @extend %__grid-normalize-with-margins-col-12-12;
  }
}

// ============================================================================
// :: Accessibility - Text Zoom Large
// ============================================================================
// When text zoom is set to large, stack grid columns to one per row
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .l-grid--with-margins {
    [class*="l-grid__col"] {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }

  .l-grid--normalize-with-margins {
    [class*="l-grid__col"] {
      flex: 100%;
      max-width: 100% !important;
    }
  }
}

html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .o-overlay__content-container {
    .l-grid--with-margins {
      [class*="l-grid__col"] {
        flex: 0 0 100% !important;
        max-width: 90% !important;
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
    }
  }
}