
//TODO: Add a 'center-x-left', 'center-x-right', `center-y-top`, `center-y-bottom`
//TODO: Modularize it (Possible in a clean way?)
//FIXME: `.multiple.fluid.joined` is rendered differently in Safari (In the demo the container with `Right` inside doesn't grow enough)
//FIXME: In the `toolbar` demo if we set their padding to 0 the margin shows up and the gutter between toolbars disappears

/* MULTIPLE */

%multiple {}

.multiple {

  @extend %multiple;
  @include last-child-no-gutter ( 0, - $gutter );
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;

  /* GUTTER */

  // In order to support inline elements that don't have a `margin-bottom` setted

  > :not(.multiple) {
    margin-bottom: $gutter;
  }

  /* GUTTER NORMAL */

  &:not(.no-wrap):not(.vertical):not(.joined) {

    @include margin-x ( - $gutter-half );

    > :not(.multiple) {
      @include margin-x ( $gutter-half );
    }

    > .multiple:not(.no-wrap):not(.vertical):not(.joined) {
      @include margin-x ( 0 );
    }

    > .multiple.no-wrap,
    > .multiple.vertical,
    > .multiple.joined {
      @include margin-x ( $gutter-half );
    }

  }

  /* GUTTER NO-WRAP */

  &.no-wrap:not(.vertical):not(.joined) {

    > :not(.multiple) {

      &:not(:first-child) {
        margin-left: $gutter-half;
      }

      &:not(:last-child) {
        margin-right: $gutter-half;
      }

    }

    > .multiple:not(.no-wrap):not(.vertical):not(.joined) {

      &:not(:first-child) {
        margin-left: 0;
      }

      &:not(:last-child) {
        margin-right: 0;
      }

    }

    > .multiple.no-wrap,
    > .multiple.vertical,
    > .multiple.joined {

      &:not(:first-child) {
        margin-left: $gutter-half;
      }

      &:not(:last-child) {
        margin-right: $gutter-half;
      }

    }

  }

  /* GUTTER VERTICAL */

  &.vertical {

    > .multiple:not(.no-wrap):not(.vertical):not(.joined) {

      @include margin-x ( 0 );

      > :not(.multiple) {

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

        &:last-child {
          margin-right: 0;
        }

      }

      > .multiple:not(.no-wrap):not(.vertical):not(.joined) {

        &:first-child {
          margin-left: - $gutter-half;
        }

        &:last-child {
          margin-right: - $gutter-half;
        }

      }

      > .multiple.no-wrap,
      > .multiple.vertical,
      > .multiple.joined {

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

        &:not(:last-child) {
          margin-right: $gutter-half;
        }

        &:not(:first-child) {
          margin-left: $gutter-half;
        }

        &:last-child {
          margin-right: 0;
        }

      }

    }

  }

  /* VERTICAL */

  &.vertical {
    flex-direction: column;
  }

  /* CENTER */

  &.center-x:not(.vertical),
  &.center-y.vertical,
  &.center {
    justify-content: center;
  }

  &.center-y:not(.vertical),
  &.center-x.vertical,
  &.center {
    align-items: center;
  }

  /* NO WRAP */

  &.no-wrap {
    flex-wrap: nowrap;
  }

  /* EQUAL */

  &.equal {

    &:not(.vertical) > * {
      flex: 1 0 0%; // IE-10/11 misinterpreter a unitless 0 flex-basis
    }

    &.vertical > * {
      width: 100%;
    }

  }

  /* JOINED */

  &.joined {

    flex-wrap: nowrap;
    align-items: stretch;

    > .multiple {
      @include margin-x ( 0 );
    }

    &:not(.vertical) {

      > :not(:last-child),
      > .multiple:not(:last-child) > :last-child,
      > .multiple.joined.vertical:not(:last-child) > :not(.multiple),
      > .multiple.joined.vertical:not(:last-child) > .multiple.joined > :not(.multiple) {
        @include border-right-radius ( 0 );
        margin-right: 0;
        border-right-width: 0;
      }

      > :not(:first-child),
      > .multiple:not(:first-child) > :first-child,
      > .multiple.joined.vertical:not(:first-child) > :not(.multiple),
      > .multiple.joined.vertical:not(:first-child) > .multiple.joined > :not(.multiple) {
        @include border-left-radius ( 0 );
        margin-left: 0;
      }

      &.no-separators {

        > :not(:first-child),
        > .multiple:not(:first-child) > :first-child,
        > .multiple.joined.vertical:not(:first-child) > :not(.multiple) {
          border-left-width: 0;
        }

        > .multiple:not(:last-child) > :last-child {
          border-right-width: 0;
        }

        > .multiple.joined.vertical > :not(.multiple):not(:first-child) {
          border-top-width: 0;
        }

      }

      &.only-separators {

        > :first-child,
        > .multiple:first-child > :first-child,
        > .multiple.joined.vertical:first-child > :not(.multiple) {
          border-left-width: 0;
        }

        > :last-child,
        > .multiple:last-child > :last-child,
        > .multiple.joined.vertical:last-child > :not(.multiple) {
          border-right-width: 0;
        }

        > .multiple.joined.vertical > :not(.multiple):first-child {
          border-top-width: 0;
        }

        > .multiple.joined.vertical > :not(.multiple):last-child {
          border-bottom-width: 0;
        }

      }

    }

    &.vertical {

      > :not(:last-child),
      > .multiple:not(:last-child) > :last-child,
      > .multiple.joined:not(.vertical):not(:last-child) > :not(.multiple),
      > .multiple.joined:not(.vertical):not(:last-child) > .multiple.joined > :not(.multiple) {
        @include border-bottom-radius ( 0 );
        margin-bottom: 0;
        border-bottom-width: 0;
      }

      > :not(:first-child),
      > .multiple:not(:first-child) > :first-child,
      > .multiple.joined:not(.vertical):not(:first-child) > :not(.multiple),
      > .multiple.joined:not(.vertical):not(:first-child) > .multiple.joined > :not(.multiple) {
        @include border-top-radius ( 0 );
        margin-top: 0;
      }

      &.no-separators {

        > :not(:first-child),
        > .multiple:not(:first-child) > :first-child,
        > .multiple.joined:not(.vertical):not(:first-child) > :not(.multiple) {
          border-top-width: 0;
        }

        > .multiple:not(:last-child) > :last-child {
          border-bottom-width: 0;
        }

        > .multiple.joined:not(.vertical) > :not(.multiple):not(:first-child) {
          border-left-width: 0;
        }

      }

      &.only-separators {

        > :first-child,
        > .multiple:first-child > :first-child,
        > .multiple.joined:not(.vertical):first-child > :not(.multiple) {
          border-top-width: 0;
        }

        > :last-child,
        > .multiple:last-child > :last-child,
        > .multiple.joined:not(.vertical):last-child > :not(.multiple) {
          border-bottom-width: 0;
        }

        > .multiple.joined:not(.vertical) > :not(.multiple):first-child {
          border-left-width: 0;
        }

        > .multiple.joined:not(.vertical) > :not(.multiple):last-child {
          border-right-width: 0;
        }

      }

    }

  }

  /* STRETCHED */

  &.stretched {

    align-items: stretch;

    > * {
      flex-grow: 1;
    }

  }

}

/* INLINE CHILDREN FIX (IE10) */

html.no-flexbox.flexbox-tweener {

  /* MULTIPLE */

  .multiple {

    /* INLINE CHILDREN */

    > a,
    > button,
    > span {
      display: inline-block;
    }

  }

}
