// Flow Layout
//
// Flow layouts are intended for use with the Drupal Paragraphs module
//
// .flow-thirds - add to parent element, use three columns
// .flow_middle - center column (default)
// .flow_left - float to left column
// .flow_right - float to right column
// .flow_full - full-width column
//
// Styleguide: Layout.Flow

.flow {
  clear: both;
  @include tablet {
    margin-left: calc(16.3% - #{$column-gap / 2});
    margin-right: calc(16.3% - #{$column-gap / 2});
    margin-top: -$column-gap;
    //
    &:last-child {
      margin-bottom: -$column-gap;
    }
    &:not(:last-child) {
      margin-bottom: calc(1.5rem - #{$column-gap});
    }
  }
  @include desktop {
    .flow_breakout {
      box-sizing: border-box;
      padding: 3em;
      background: pink;
      margin-left: calc(50% - 50vw + 0.5em);
      margin-right: calc(50% - 50vw + 0.5em);
    }
  }
  //
  [class^=flow] {
    box-sizing: border-box;
    @include tablet {
      padding: $column-gap;
    }
  }
  .flow_full {
    @include tablet {
      margin-left: -25%;
      margin-right: -25%;
    }
  }
  .flow_middle {
    @include tablet {}
  }
  .flow_left {
    @include tablet {
      float: left;
      margin-left: -25%;
      width: 25%;
    }
  }
  .flow_right {
    @include tablet {
      float: right;
      margin-right: -25%;
      width: 25%;
    }
  }
}

.flow-thirds {
  @include tablet {
    margin-left: calc(25% - #{$column-gap / 2});
    margin-right: calc(25% - #{$column-gap / 2});
  }
  //
  .flow_full {
    @include tablet {
      margin-left: -50%;
      margin-right: -50%;
    }
  }
  .flow_middle {
    @include tablet {}
  }
  .flow_left {
    @include tablet {
      float: left;
      margin-left: -50%;
      width: 50%;
    }
  }
  .flow_right {
    @include tablet {
      float: right;
      margin-right: -50%;
      width: 50%;
    }
  }
}
