//
// Grid
// --------------
// bigchain.io
//
// adapted from github.com/kremalicious/kremalicious3/blob/master/_src/_assets/styl/grid.styl
//


//
// More sane box model
//
*,
*:before,
*:after {
    box-sizing: border-box;
}


//
// Base
//
.grid {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.grid__col {
    flex: 1;
    // Firefox grid fix for whatever reason
    min-height: 0;
    min-width: 0;
}

.row {
    .clearfix; // for legacy float usage reasons
    max-width: @screen-lg-min;
    margin: auto;
    padding-left: (@gutter-space/4);
    padding-right: (@gutter-space/4);

    @media (@screen-sm) {
        padding-left: (@gutter-space/2);
        padding-right: (@gutter-space/2);
    }
    @media (@screen-md) {
        padding-left: @gutter-space;
        padding-right: @gutter-space;
    }
}

// more narrow row for all long text content
.row--content {
    max-width: (@screen-md-min - @gutter-space);
}


//
// Alignment per row
//
.grid--top {
    align-items: flex-start
}

.grid--bottom {
    align-items: flex-end
}

.grid--center {
    align-items: center
}

.grid--justifycenter {
    justify-content: center
}


//
// Alignment per cell
//
.grid__col--top {
    align-self: flex-start
}

.grid__col--bottom {
    align-self: flex-end
}

.grid__col--center {
    align-self: center
}


//
// Gutters
//
.grid--gutters {
    margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);

    > .grid__col {
        padding: @gutter-space 0 0 @gutter-space;;
    }
}

@media (@screen-sm) {
    .grid-small--gutters {
        margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);

        > .grid__col {
            padding: @gutter-space 0 0 @gutter-space;
        }
    }
}

@media (@screen-md) {
    .grid-medium--gutters {
        margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);

        > .grid__col {
            padding: @gutter-space 0 0 @gutter-space;
        }
    }
}

@media (@screen-lg) {
    .grid-large--gutters {
        margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);

        > .grid__col {
            padding: @gutter-space 0 0 @gutter-space;
        }
    }
}


//
// Columns
//
.grid--fit {
    > .grid__col { flex: 1; }
}

.grid--full {
    > .grid__col { flex: 0 0 100%; }
}

.grid--1of6 {
    > .grid__col { flex: 0 0 16.5%; }
}

.grid--2of6,
.grid--third {
    > .grid__col { flex: 0 0 33%; }
}

.grid--3of6,
.grid--half {
    > .grid__col { flex: 0 0 50%; }
}

.grid--4of6 {
    > .grid__col { flex: 0 0 66%; }
}

.grid--5of6 {
    > .grid__col { flex: 0 0 82.5%; }
}

@media (@screen-xs) {
    .grid-mini--fit {
        > .grid__col { flex: 1; }
    }
    .grid-mini--full{
        > .grid__col { flex: 0 0 100%; }
    }
    .grid-mini--1of6 {
        > .grid__col { flex: 0 0 16.5%; }
    }
    .grid-mini--2of6,
    .grid-mini--third {
        > .grid__col { flex: 0 0 33%; }
    }
    .grid-mini--3of6,
    .grid-mini--half {
        > .grid__col { flex: 0 0 50%; }
    }
    .grid-mini--4of6 {
        > .grid__col { flex: 0 0 66%; }
    }
    .grid-mini--5of6 {
        > .grid__col { flex: 0 0 82.5%; }
    }
}

@media (@screen-sm) {
    .grid-small--fit {
        > .grid__col { flex: 1; }
    }
    .grid-small--full{
        > .grid__col { flex: 0 0 100%; }
    }
    .grid-small--1of6 {
        > .grid__col { flex: 0 0 16.5%; }
    }
    .grid-small--2of6,
    .grid-small--third {
        > .grid__col { flex: 0 0 33%; }
    }
    .grid-small--3of6,
    .grid-small--half {
        > .grid__col { flex: 0 0 50%; }
    }
    .grid-small--4of6 {
        > .grid__col { flex: 0 0 66%; }
    }
    .grid-small--5of6 {
        > .grid__col { flex: 0 0 82.5%; }
    }
}

@media (@screen-md) {
    .grid-medium--fit {
        > .grid__col { flex: 1 }
    }

    .grid-medium--full {
        > .grid__col { flex: 0 0 100%; }
    }

    .grid-medium--1of6 {
        > .grid__col { flex: 0 0 16.5%; }
    }

    .grid-medium--2of6,
    .grid-medium--third {
        > .grid__col { flex: 0 0 33%; }
    }

    .grid-medium--3of6,
    .grid-medium--half {
        > .grid__col { flex: 0 0 50%; }
    }

    .grid-medium--4of6 {
        > .grid__col { flex: 0 0 66%; }
    }

    .grid-medium--5of6 {
        > .grid__col { flex: 0 0 82.5%; }
    }
}

@media (@screen-lg) {
    .grid-large--fit {
        > .grid__col { flex: 1; }
    }

    .grid-large--full {
        > .grid__col { flex: 0 0 100%; }
    }

    .grid-large--1of6 {
        > .grid__col { flex: 0 0 16.5%; }
    }

    .grid-large--2of6,
    .grid-large--third {
        > .grid__col { flex: 0 0 33%; }
    }

    .grid-large--3of6,
    .grid-large--half {
        > .grid__col { flex: 0 0 50%; }
    }

    .grid-large--4of6 {
        > .grid__col { flex: 0 0 66%; }
    }

    .grid-large--5of6 {
        > .grid__col { flex: 0 0 82.5%; }
    }
}