
// @require core/widget/widget.scss

//TODO: Add support for vertical sections

/* SECTIONS */

.sections {

  @extend %widget;
  @include children-no-gutter ();
  display: flex;
  flex-wrap: nowrap;

  /* SECTION CENTER */

  // Centering the center segment, if the left one xor the right one is missing
  // An obvious `left + center + right` or `right + center + left` (RTL languages) order is assumed

  > .section-center:not(:only-child) {

    &:first-child,
    &:last-child,
    &.forced {
      @include center-absolute-transform ();
    }

  }

  /* CENTER */

  //TODO: Maybe join them with `multiple`'s and make a decorator for them

  &.center-x,
  &.center {
    justify-content: center;
  }

  &.center-y,
  &.center {
    align-items: center;
  }

}

/* SEGMENTS */

.section-left,
.section-center,
.section-right {
  @extend %widget;
  display: flex;
  flex: 1 1 auto;  // IE-10/11 sets flex-shrink to 0
}

/* LEFT */

.section-left {
  justify-content: flex-start;
}

/* CENTER */

.section-center {
  justify-content: center;
}

/* RIGHT */

.section-right {
  justify-content: flex-end;
}
