// Table of Contents
// ==================================================
// Visibilities
// Rows
// Containers
// Columns
// 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; }
      }
    }
  }
}

// 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; }
}

// Media Queries
// ==================================================
@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; }
    }
  }

  .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; }
  }
  .hidden-desktop { display: inherit; }
  .hidden-phone { display: none; }
}