//  Responsive 12 Column Grid loosely
//  loosely based bootstrap/
//================================================== //

$gutter-size: 20px;
$gutter-neg-size: -20px;

//$breakpoint-phone: 320px;
//$breakpoint-phone-to-tablet: 768px;
//$breakpoint-tablet-to-desktop: 1160px;
//$breakpoint-desktop-to-extralarge: 1440px;
.row {
  clear: both;
  font-size: $ids-size-font-sm;
  margin: 0 auto;
  max-width: $breakpoint-tablet-to-desktop;
  width: 100%;

    &.flex-align-bottom {
      &.has-messages {
        // align-items: center;
        input:not(.error) {
          margin-bottom: 22px;
        }
      }
    }

  &.full-width {
    margin-top: 20px;
    max-width: 100%;
  }

  &.full-width-only {
    max-width: 100%;
  }

  &.reduced {
    max-width: $breakpoint-tablet-reduced;
  }

  &:last-child {
    margin-bottom: 30px;
  }

  &.offset-two {
    max-width: 1160px;
    padding-left: 40px;
  }

  &.align-to-title {
    padding: 0 1rem;
  }

  &.top-padding {
    padding-top: 30px;
  }

  &.small-top-padding {
    padding-top: 10px;
  }

  &.no-top-padding {
    padding-top: 0 !important;
  }

  &.no-bottom-margin {
    margin-bottom: 0;
  }

  &.bottom-padding {
    padding-bottom: 30px;
  }

  &.small-bottom-padding {
    padding-bottom: 10px;
  }

  &.extended-bottom-padding {
    padding-bottom: 45px;
  }

  &.full-height {
    height: 100%;
    margin: 0 auto;
  }

  &.full-height-only {
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  // No Indent Rows grid/example-nesting-no-margins.html
  // Create a mixin for the column width calculations
  @mixin column-widths {
    .one.column,
    .one.columns { width: calc(8.33333333333% - 18.33333333333px); }

    .one-one-half.column,
    .one-one-half.columns { width: calc(12.499999999965% - 12.499999999965px); }

    .two.columns { width: calc(16.6666666666% - 16.6666666666px); }
    .three.columns { width: calc(25% - 15px); }
    .four.columns { width: calc(33.3333333333% - 14.33333333333px); }
    .five.columns { width: calc(41.6666666666% - 10px); }
    .six.columns { width: calc(50% - 10px); }
    .seven.columns { width: calc(58.3333333333% - 10px); }
    .eight.columns { width: calc(66.6666666666% - 6px); }
    .nine.columns { width: calc(75% - 5px); }
    .ten.columns { width: calc(83.3333333333% - 4px); }
    .eleven.columns { width: calc(91.6666666666% - 2px); }

    .twelve.columns,
    .full.column { width: calc(100% - 10px); }
  }

  // Apply to no-indent
  &.no-indent {
    padding-right: 0;

    .column,
    .columns {
      padding: 0;

      &:first-child {
        margin-left: 0;
      }
    }

    @include column-widths;
  }

  // Apply to no-indent-self
  &.no-indent-self {
    padding-right: 0;

    & > {
      .column,
      .columns {
        padding: 0;

        &:first-child {
          margin-left: 0;
        }
      }

      @include column-widths;
    }
  }
}

.row.no-indent .column:first-child,
.row.no-indent .columns:first-child {
  margin-left: 0;
}

.column.full-height .twelve.columns:first-child,
.column.full-height .full.column:first-child,
.columns.full-height .twelve.columns:first-child,
.columns.full-height .full.column:first-child {
  margin-left: 0;
}

.row::after {
  clear: both;
  content: '';
  display: table;
}

.homepage .row {
  clear: none;
}

// For this App Space out the Header
.header + .svg-icons + div {
  margin-top: 10px;
}

.column,
.columns {
  float: left;
  padding: 0 20px;
  width: 100%;

  &.l-center {
    text-align: center;

    .field,
    .image-round {
      text-align: center;

      label {
        text-align: left;
      }
    }
  }

  &.flex-align-center {
    align-self: center;

    .field .checkbox-label {
      overflow: visible;
    }
  }

  &.full-height {
    height: 100%;
    margin: 0;

    .datagrid-body {
      height: calc(100% - 85px);
    }

    .has-toolbar .datagrid-body {
      height: calc(100% - 40px);
    }

    .one.column,
    .one.columns {
      margin-left: $gutter-size;
      width: calc(8.33333333333% - 20px);
    }

    .one-one-half.column,
    .one-one-half.columns {
      margin-left: $gutter-size;
      width: calc(12.499999999965% - 20px);
    }

    .two.columns {
      margin-left: $gutter-size;
      width: calc(16.6666666666% - 20px);
    }

    .three.columns {
      margin-left: $gutter-size;
      width: calc(25% - 20px);
    }

    .four.columns {
      margin-left: $gutter-size;
      width: calc(33.3333333333% - 20px);
    }

    .five.columns {
      margin-left: $gutter-size;
      width: calc(41.6666666666% - 20px);
    }

    .six.columns {
      margin-left: $gutter-size;
      width: calc(50% - 20px);
    }

    .seven.columns {
      margin-left: $gutter-size;
      width: calc(58.3333333333% - 20px);
    }

    .eight.columns {
      margin-left: $gutter-size;
      width: calc(66.6666666666% - 20px);
    }

    .nine.columns {
      margin-left: $gutter-size;
      width: calc(75% - 20px);
    }

    .ten.columns {
      margin-left: $gutter-size;
      width: calc(83.3333333333% - 20px);
    }

    .eleven.columns {
      margin-left: $gutter-size;
      width: calc(91.6666666666% - 20px);
    }

    .twelve.columns,
    .full.column {
      margin-left: $gutter-size;
      width: calc(100% - 20px);

      &.center {
        display: block;
        min-width: 300px;
        text-align: center;
      }
    }
  }
}

@include respond-to(phabletdown) {
  .one-half-mobile {
    margin-left: 0;
    width: 50%;

    + .one-half-mobile {
      padding-left: 20px;
    }
  }

  .row.no-indent {
    .column,
    .columns {
      margin-left: 0;
      width: 100% !important;
    }
  }

  .column,
  .columns {
    .full-mobile {
      margin-left: 0;
      width: 100% !important;
    }
  }
}

// For tabledevices larger than 550px
@media (min-width: $breakpoint-phone-to-tablet) {
  .row {
    padding-right: 20px;

    &.flex-align-bottom {
      align-items: flex-end;
      display: flex;
      flex-direction: row;
    }
  }

  .column,
  .columns {
    padding: 0;
  }

  .column .field-flex input,
  .columns .field-flex input {
    width: 100%;
  }

  .one.column,
  .one.columns {
    margin-left: $gutter-size;
    width: calc(8.33333333333% - 20px);
  }

  .one-one-half.column,
  .one-one-half.columns {
    margin-left: $gutter-size;
    width: calc(12.499999999965% - 20px);
  }

  .two.columns {
    margin-left: $gutter-size;
    width: calc(16.6666666666% - 20px);
  }

  .three.columns {
    margin-left: $gutter-size;
    width: calc(25% - 20px);
  }

  .four.columns {
    margin-left: $gutter-size;
    width: calc(33.3333333333% - 20px);
  }

  .five.columns {
    margin-left: $gutter-size;
    width: calc(41.6666666666% - 20px);
  }

  .six.columns {
    margin-left: $gutter-size;
    width: calc(50% - 20px);
  }

  .seven.columns {
    margin-left: $gutter-size;
    width: calc(58.3333333333% - 20px);
  }

  .eight.columns {
    margin-left: $gutter-size;
    width: calc(66.6666666666% - 20px);
  }

  .nine.columns {
    margin-left: $gutter-size;
    width: calc(75% - 20px);
  }

  .ten.columns {
    margin-left: $gutter-size;
    width: calc(83.3333333333% - 20px);
  }

  .eleven.columns {
    margin-left: $gutter-size;
    width: calc(91.6666666666% - 20px);
  }

  .twelve.columns,
  .full.column {
    margin-left: $gutter-size;
    width: calc(100% - 20px);

    &.center {
      display: block;
      min-width: 300px;
      text-align: center;
    }
  }

  .one-fifth.column {
    margin-left: $gutter-size;
    width: calc(20% - 20px);
  }

  .one-fourth.column {
    margin-left: $gutter-size;
    width: calc(25% - 20px);
  }

  .one-third.column {
    margin-left: $gutter-size;
    width: calc(33.3333333% - 20px);
  }

  .two-thirds.column {
    margin-left: $gutter-size;
    width: calc(66.6666666666% - 20px);
  }

  .one-half.column {
    margin-left: $gutter-size;
    width: calc(50% - 20px);
  }
}

// RTL Styles
html[dir='rtl'] {
  .column,
  .columns {
    float: right;

    &.l-center {
      .field {
        label {
          text-align: right;
        }
      }
    }
  }

  // For tabledevices larger than 550px
  @media (min-width: $breakpoint-phone-to-tablet) {
    .row {
      padding-left: 20px;
      padding-right: inherit;
    }

    .one.column,
    .one.columns,
    .one-one-half.column,
    .one-one-half.columns,
    .two.columns,
    .three.columns,
    .four.columns,
    .five.columns,
    .six.columns,
    .seven.columns,
    .eight.columns,
    .nine.columns,
    .ten.columns,
    .eleven.columns,
    .twelve.columns,
    .full.column,
    .one-third.column,
    .one-fourth.column,
    .one-fifth.column,
    .two-thirds.column,
    .one-half.column {
      margin-left: inherit;
      margin-right: $gutter-size;
    }
  }
}