//----------------------------------------------------------------
//             Grid
//----------------------------------------------------------------

@include size-rules('.grid'){
    display: flex;
    flex-wrap: wrap;
    
    & > *{
        position: relative;
        padding-left: $grid-gutter/2;
        padding-right: $grid-gutter/2;
    }

    &.grid-nowrap       {flex-wrap:nowrap;}
    &.grid-gutter-2x {
        & > * {
            padding-left: $grid-gutter;
            padding-right: $grid-gutter;
        }
    }
}
@include size-rule('md'){
    .grid,
    .grid-md,
    .grid-lg,
    .grid-xl{
        & > * {
            padding-left:$grid-gutter;
            padding-right: $grid-gutter;
        }
    }
    
    .grid.grid-gutter-2x {
        & > * {
            padding-left:$grid-gutter * 2;
            padding-right: $grid-gutter * 2;
        }
    }
}

.grid-h-left      {justify-content: flex-start;}
.grid-h-center     {justify-content: center;}
.grid-h-right      {justify-content: flex-end;}
.grid-h-around     {justify-content: space-around;}
.grid-h-between    {justify-content: space-between;}

.grid-v-top        {align-content: flex-start;}
.grid-v-center     {align-content: center;}
.grid-v-bottom     {align-content: flex-end;}
.grid-v-around     {align-content: space-around;}
.grid-v-between    {align-content: space-between;}
.grid-v-stretch    {align-content: stretch;}

.grid-center       {align-items: center;}
.grid-top          {align-items: flex-start;}
.grid-bottom       {align-items: flex-end;}
.grid-stretch      {align-items: stretch;}

.grid-vertical{
    flex-direction: column;
    & > *{
        padding-left: 0;
        padding-right: 0;
        padding-top: $grid-gutter;
        padding-bottom: $grid-gutter;
    }
    &.grid-gutter-none{
        & > * {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
}

.grid-gutter-none{
    & > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.grid-nest{
    margin-left: -$grid-gutter;
    margin-right: -$grid-gutter;
    &.grid-gutter-2x{
        margin-left: -$grid-gutter*2;
        margin-right: -$grid-gutter*2;
    }
}
.grid-nest-half{
    margin-left: -0.5em;
    margin-right: -0.5em;
}
@include size-rule('sm'){
    .grid-nest{
        margin-left: -$grid-gutter/2;
        margin-right: -$grid-gutter/2;
        &.grid-gutter-2x{
            margin-left: -$grid-gutter;
            margin-right: -$grid-gutter;
        }
    }
}

// fix for IE https://codepen.io/anon/pen/gxNraR
.grid-min-height-fix{
    width: 100%;
    display: flex;
    flex-direction: row;
    .grid{
        width: 100%;
    }
}

//----------------------------------------------------------------
//             Columns
//----------------------------------------------------------------
.col-center       {align-self: center;}
.col-top          {align-self: flex-start;}
.col-bottom       {align-self: flex-end;}
.col-stretch      {align-self: stretch;}
@include size-rules(".col"){
    flex: 0 1 auto;
}
@include size-rules(".col-fill"){
    flex: 1 1 auto;
}
@include size-rules(".col-gutter-none"){
    padding-left: 0 !important; // TODO remove !important
    padding-right: 0 !important; // TODO remove !important
}
@for $i from 0 through $grid-columns {
    @include size-rules(".col-#{$i}"){
        flex: 0 0 #{($i / $grid-columns * 100) + "%"};
        max-width: #{($i / $grid-columns * 100) + "%"};
    }
    @include size-rules(".col-offset-#{$i}"){
        margin-left: #{($i / $grid-columns * 100) + "%"};
    }
    @include size-rules(".col-push-#{$i}"){
        position:relative;
        left: #{($i / $grid-columns * 100) + "%"};
    }
    @include size-rules(".col-pull-#{$i}"){
        position:relative;
        right: #{($i / $grid-columns * 100) + "%"};
    }
    @include size-rules(".col-fill-#{$i}"){
        flex: #{$i}; 
    }
    @include size-rules(".col-grow-#{$i}"){
        flex-grow: #{$i}; 
    }
    @include size-rules(".col-shrink-#{$i}"){
        flex-shrink: #{$i}; 
    }
}