/**
* We use a 24col Bootstrap grid. Learn more at the [Bootstrap docs](http://getbootstrap.com/css/#grid).
*
* __Usage__:
* - We __do not use__ `container` or `container-fluid`.
* - Rows have a margin-top applied by default for proper spacing in the app's `<main>` container and to space cards nicely. Add the class `no-space` to the row if you need to strip this margin.
* - Add the class `no-gutters` to the row if you need to strip all the column gutter spacing.
*
* @section Grid
* @example
* <!-- Example specific styles. -->
* <style>
*   .row p {
*     text-align: center;
*     background-color: #f5f5f5;
*     border: 1px solid #ddd;
*   }
* </style>
* <!-- Grid Markup -->
* <div class="row">
*   <div class="col-sm-8"><p>8</p></div>
*   <div class="col-sm-8"><p>8</p></div>
*   <div class="col-sm-8"><p>8</p></div>
* </div>
* <div class="row">
*   <div class="col-xs-8 col-xs-offset-8"><p>8 offset by 8</p></div>
* </div>
* <div class="row no-gutters">
*   <div class="col-sm-12"><p>12</p></div>
*   <div class="col-sm-12"><p>12</p></div>
* </div>
* <div class="row no-space">
*   <div class="col-sm-12"><p>12</p></div>
*   <div class="col-sm-12"><p>12</p></div>
* </div>
*/

@grid-columns: 24;
@grid-gutter-width: 14px;

.row {
  margin-top: 0.75em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.5em;
  padding-right: 0.5em;
  &.no-space {
    margin-top: 0;
  }
  &.no-gutters {
    margin-right: 0;
    margin-left: 0;
    padding-left: 1em;
    padding-right: 1em;
    & > [class^="col-"],
    & > [class*=" col-"] {
      padding-right: 0;
      padding-left: 0;
    }
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// Add spacing when columns are collapsed.
.row:not(.no-gutters) {
  [class^="col-sm-"],
  [class*=" col-sm-"],
  [class^="col-md-"],
  [class*=" col-md-"],
  [class^="col-lg-"],
  [class*=" col-lg-"] {
    & + [class^="col-sm-"],
    & + [class*=" col-sm-"]
    & + [class^="col-md-"],
    & + [class*=" col-md-"]
    & + [class^="col-lg-"],
    & + [class*=" col-lg-"] {
      margin-top: 1em;
      @media(min-width: @screen-sm-min) {
        margin-top: 0;
      }
    }
  }
}

// Flex Content with gutters
.flex-container {
  display: flex;
  flex-direction: row;
  align-content: stretch;
  justify-content: space-between;
  .flex-item {
    margin-right: 1em;
    &.flex-item-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &:last-child {
      margin-right: 0;
    }
    &.flex-bg {
      flex: 2 0 0;
    }
    &.flex-sm {
      flex: 1 0 0;
    }
  }
  @media @md-bp {
    display: block;
  }
}