/* REBLIM GRID
----------------------------------------------*/
//rb-grid variables
$rb-grid-100 : 100%;
$rb-grid-XXS : 480px;
$rb-grid-XS  : 640px;
$rb-grid-S   : 768px;
$rb-grid-M   : 960px;
$rb-grid-L   : 1024px;
$rb-grid-XL  : 1280px;
$rb-grid-XXL : 1680px;

$rb-grid-gutter : 1%;

.reblim,
.rb {
    
    //rb-grid containers
    &.rb-container, &.rb-container-xs, 
    &.rb-container-s, &.rb-container-m, 
    &.rb-container-l, &.rb-container-xl,
    .rb-container, .rb-container-xs, 
    .rb-container-s, .rb-container-m, 
    .rb-container-l, .rb-container-xl  {
        position: relative;
        width: $rb-grid-100;
        margin: 0 auto;
        text-align: center;

        &.rb-left {
            float: left;
        }

        &.rb-right {
            float: right;
        }
    }

    &.rb-container-xs { max-width: $rb-grid-S; }
    &.rb-container-s { max-width: $rb-grid-M; }
    &.rb-container-m { max-width: $rb-grid-L; }
    &.rb-container-l { max-width: $rb-grid-XL; }
    &.rb-container-xl { max-width: $rb-grid-XXL; }
    
    //rb-grid row 
    .rb-row:before, 
    .rb-row:after {
        display: table;
        clear: both;
        content: '';
    }
    
    [class*='rb-grid-'] {
        float: left; 
        min-height: 1px; 
        width: 100%; 
        padding: 10px;
        
        &.outline {
            box-shadow: 0 0 0 1px #333 inset;
        }
    }

    //rb-grid standard
    .rb-grid-1, .rb-grid-2, 
    .rb-grid-3, .rb-grid-4, 
    .rb-grid-5, .rb-grid-6,
    .rb-grid-7, .rb-grid-8, 
    .rb-grid-9, .rb-grid-10, 
    .rb-grid-11, .rb-grid-12 {

        &.rb-gutter {
            width: 100% - $rb-grid-gutter*2;
            margin: $rb-grid-gutter;
            background: green;
            
            &:first-of-type {
                margin-right: $rb-grid-gutter/2;
                margin-left: $rb-grid-gutter*1.5;
            }

            &:last-of-type {
                margin-left: $rb-grid-gutter/2;
                margin-right: $rb-grid-gutter*1.5;
            }
        }
        
        &.rb-gutter-horizontal {
            margin: 0 $rb-grid-gutter;
            width: 50% - $rb-grid-gutter*2;
        }

        &.rb-gutter-vertical {
            margin: $rb-grid-gutter 0;
            width: 50% - $rb-grid-gutter*2;
        }
    }
    
    //rb-grid smart
    &.rb-smart {
        
        .rb-grid-1, .rb-grid-2, 
        .rb-grid-3, .rb-grid-4, 
        .rb-grid-5, .rb-grid-6,
        .rb-grid-7, .rb-grid-8, 
        .rb-grid-9, .rb-grid-10, 
        .rb-grid-11, .rb-grid-12 { 
            width: 100%;
        }
    }
    
    //rb-grid rigid
    &.rb-rigid {
        
        .rb-grid-1 { width: 100%; }
        .rb-grid-2 { width: 50%; }
        .rb-grid-3 { width: 33.33%; }
        .rb-grid-4 { width: 25%; }
        .rb-grid-5 { width: 20%; }
        .rb-grid-6 { width: 16.66%; }
        .rb-grid-7 { width: 14.28%; }
        .rb-grid-8 { width: 12.5%; }
        .rb-grid-9 { width: 11.11%; }
        .rb-grid-10 { width: 10%; }
        .rb-grid-11 { width: 9.09%; }
        .rb-grid-12 { width: 8.33%; }
    }
    
    @media screen and (min-width: $rb-grid-XXS) {
        //rb-grid smart
        &.rb-smart {
            
            .rb-grid-2, .rb-grid-4, 
            .rb-grid-8, .rb-grid-10 {
                width: 50%;
            }

            .rb-grid-3, .rb-grid-6,
            .rb-grid-9, .rb-grid-12 { 
                width: 33.33%;
            }
        }
    }

    @media screen and (min-width: $rb-grid-XS) {
        //rb-grid smart
        &.rb-smart {
            
            .rb-grid-4, .rb-grid-8 {
                width: 25%;
            }

            .rb-grid-5, .rb-grid-10 { 
                width: 20%; 
            }

            .rb-grid-6 { 
                width: 16.66%;  
            }

            .rb-grid-7 { 
                width: 14.28%; 
            }
        }
    }

    @media screen and (min-width: $rb-grid-S) {
        //rb-grid standard
        .rb-grid-2 { width: 50%; }
        .rb-grid-3 { width: 33.33%; }
        .rb-grid-4 { width: 25%; }
        .rb-grid-5 { width: 20%; }
        .rb-grid-6 { width: 16.66%; }
        .rb-grid-7 { width: 14.28%; }
        .rb-grid-8 { width: 12.5%; }
        .rb-grid-9 { width: 11.11%; }
        .rb-grid-10 { width: 10%; }
        .rb-grid-11 { width: 9.09%; }
        .rb-grid-12 { width: 8.33%; }

        //rb-grid smart
        &.rb-smart {
            
             .rb-grid-8 { 
                width: 12.5%; 
            }

            .rb-grid-9 { 
                width: 11.11%;    
            }

            .rb-grid-11 { 
                width: 9.09%; 
            }

            .rb-grid-12 { 
                width: 8.33%;   
            }
        }
       
    }
}