
// @optional core/multiple/multiple.scss

// This generates `breakpoint-1/12` classes that are used for lining up the content in a grid

//FIXME: `.multiple`-related code is too ugly, and it generates too much CSS. Isn't any other way to implement it?
//TODO: Add a mixin for it, like we did with the colors ($grid-inline ( $columns ))

/* GRID */

@each $breakpoint, $value in $breakpoints {

  $class: breakpoint-get-class( $breakpoint );
  $columns: map-get( $grid-breakpoints-columns, $breakpoint );

  @if $columns {

    @include media-breakpoint-up ( $breakpoint ) {

      @each $column in $columns {

        $percentage: ( 100% / $grid-columns ) * $column;

        .#{$class}-#{$column} {
          width: $percentage;
        }

        %grid-#{$breakpoint}-#{$column}-no-gutter {
          width: calc(#{$percentage} - #{$gutter});
        }

        .multiple:not(.no-wrap):not(.vertical):not(.joined) > .#{$class}-#{$column} {

          &:not(.multiple),
          &.multiple.no-wrap,
          &.multiple.vertical,
          &.multiple.joined {
            @extend %grid-#{$breakpoint}-#{$column}-no-gutter;
          }

        }

      }

    }

  }

}
