// Table of Contents
// ==================================================
// Visibilities
// Rows
// Containers
// Columns
// Bricks
// Media Queries

// Visibilities
// ==================================================
.visible { display: inherit; }
.hidden,
.hidden-desktop { display: none; }

// Rows
// ==================================================
@each $type in $grid-row-types {
  @each $name, $margin in $grid-row-margins {
    .#{dasherize($type, $name)} {
      &::before,
      &::after {
        clear: both;
        content: '\0020';
        display: block;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        width: 0;
      }
    }
  }
}
@each $name, $margin in $grid-row-margins {
  .#{dasherize(row, $name)} { margin-bottom: $margin; }
}

// Containers
// ==================================================
@each $type in $grid-container-types {
  $i: index($grid-container-types, $type);

  @each $name, $widths in $grid-container-widths {
    $width: nth($widths, $i);

    @if $width {
      .#{dasherize($type, $name)} {
        margin: 0 auto;
        padding: 0;
        position: relative;
        width: $width;
      }

      @if $i == 2 {
        .container-max-#{$name} { max-width: $width; }
      }
    }
  }
}

.container-cols,
.container-grid {
  box-sizing: border-box;
  white-space: normal;
}
.container-cols {
  column-count: 3;
  column-gap: 20px;

  > .brick {
    margin-bottom: 20px;

    &:last-child { margin: 0; }
  }
}
.container-grid {
  align-content: flex-start;
  align-items: flex-start;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: calc(33.33333% - 10px) calc(33.33333% - 20px) calc(33.33333% - 10px);

  @each $name in center, flex-end, flex-start, space-around, space-between, stretch {
    &.align-content-#{$name} { align-content: $name; }
  }
  @each $name in baseline, center, flex-end, flex-start, stretch {
    &.align-items-#{$name} { align-items: $name; }
  }
  @each $name in column, column-reverse, row, row-reverse {
    &.flex-direction-#{$name} { flex-direction: $name; }
  }
  @each $name in nowrap, wrap, wrap-reverse {
    &.flex-wrap-#{$name} { flex-wrap: $name; }
  }
  @each $name in center, flex-end, flex-start, space-around, space-between, space-evenly {
    &.justify-content-#{$name} { justify-content: $name; }
  }
}

// Columns
// ==================================================
.cols {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;

  &.alpha { margin-left: 0; }
  &.omega { margin-right: 0; }
}

@each $name, $width in $grid-column-widths {
  .#{$name}.cols {
    width: calc(#{$width} - 20px);

    &.alpha,
    &.omega { width: calc(#{$width} - 10px); }
    &.alpha.omega { width: $width; }
  }
  .offset-by-#{$name} { padding-left: $width; }
}

// Bricks
// ==================================================
.brick {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
}

// Media Queries
// ==================================================
@media only screen and (min-width: breakpoint-min-width(xl)) {
  .container-cols { column-count: 4; }
  .container-grid { grid-template-columns: calc(25% - 10px) calc(25% - 20px) calc(25% - 20px) calc(25% - 10px); }
}
@media only screen and (min-width: breakpoint-min-width(b)) and (max-width: breakpoint-max-width(l)) {
  @each $name, $widths in $grid-container-widths {
    $width: nth($widths, 2);

    @if $width {
      .container-fixed-#{$name} { width: 960px; }
    }
  }

  .hidden-desktop { display: inherit; }
  .hidden-laptop { display: none; }
}
@media only screen and (min-width: breakpoint-min-width(s)) and (max-width: breakpoint-max-width(b)) {
  @each $name, $widths in $grid-container-widths {
    $width: nth($widths, 2);

    @if $width {
      .container-fixed-#{$name} { width: 813px; }
    }
  }

  .container-cols { column-count: 2; }
  .container-grid { grid-template-columns: calc(50% - 10px) calc(50% - 10px); }
  .hidden-desktop { display: inherit; }
  .hidden-tablet { display: none; }
}
@media only screen and (max-width: breakpoint-max-width(s)) {
  @each $name, $margin in $grid-row-margins {
    .#{dasherize(row-responsive, $name)} { margin-bottom: $margin; }
  }
  @each $type in $grid-container-types {
    $i: index($grid-container-types, $type);

    @each $name, $widths in $grid-container-widths {
      $width: nth($widths, $i);

      @if $width {
        .#{dasherize($type, $name)} {
          width: calc(100% - 20px);
          width: calc(100% - (20px + constant(safe-area-inset-right) + constant(safe-area-inset-left)));
          width: calc(100% - (20px + env(safe-area-inset-right) + env(safe-area-inset-left)));
        }
      }
    }
  }
  @each $name, $width in $grid-column-widths {
    .#{$name}.cols {
      margin: 0;
      width: 100%;

      &.alpha,
      &.omega,
      &.alpha.omega {
        margin: 0;
        width: 100%;
      }
    }
    .offset-by-#{$name} { padding-left: 0; }
  }

  .container-cols {
    column-count: 1;
    column-gap: 0;
  }
  .container-grid { grid-template-columns: repeat(1, 1fr); }
  .hidden-desktop { display: inherit; }
  .hidden-phone { display: none; }
}