///
/// Configuration map
///

// Bootcamp
@import "../bootcamp/dist/bootcamp";

// Flint
@import "../../stylesheets/flint";

$flint: (
    "breakpoints": (
        "desktop": (
            "columns": 16,
            "breakpoint": 80em
        ),
        "laptop": (
            "columns": 12,
            "breakpoint": 60em
        ),
        "tablet": (
            "columns": 8,
            "breakpoint": 40em
        ),
        "mobile": (
            "columns": 4,
            "breakpoint": 20em
        )
    ),
    "settings": (
        "default": "mobile",
        "grid": "fluid",
        "gutter": 0.625em,
        "float-direction": "left",
        "max-width": true,
        "center-container": true,
        "border-box-sizing": true,
        "instance-maps": true,
        "support-syntax": false,
        "debug-mode": false
    )
) !global;

// Enable development mode
$flint__development-mode: true !global;

// Test speed improvements
// $flint__use-ruby-functions: false !global;

///
/// BEGIN TESTS
/// -----------
///
@include runner-start;
///
/// -----------
/// BEGIN TESTS
///

@include it("should expect foundation to not be set") {
    @include should(expect($flint__foundation),
        to(be("non-existent"))
    );
}

@include _("foundation");

@include it("should expect foundation to be set") {
    @include should(expect($flint__foundation),
        to(be("existent"))
    );
}

@import "functions/functions";

///
/// END TESTS
/// ---------
///
@include runner-end;
///
/// ---------
/// END TESTS
///



///
/// Visual HTML test
///
$color__blue: #2C3F52;
$color__blue--dark: #15202A;
$color__blue--darkest: #0E181E;
$color__yellow: #FFF87B;

// Pseudo content
@mixin col-num($i) {
    &:before {
        @include _(desktop) {
            content: "#{$i} of 16";
        }
        @include _(laptop) {
            @if $i > 12 { $i: 12; }
            content: "#{$i} of 12";
        }
        @include _(tablet) {
            @if $i > 8 { $i: 8; }
            content: "#{$i} of 8";
        }
        @include _(mobile) {
            @if $i > 4 { $i: 4; }
            content: "#{$i} of 4";
        }
    }
}

// Generate cols
@for $i from 1 through 16 {
    .col-#{$i} {

        @if $i == 16 {

            @include _($i 12 8 4);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i/2 12/2 8/2 4/2, auto);
                @include col-num($i/2);

                .col-#{$i}-grandchild {
                    @include _($i/4 12/4 8/4 4/4, auto);
                    @include col-num($i/4);
                }
            }

        } @else if $i > 12 {

            @include _($i 12 8 4);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i/2 12/2 8/2 4/2, auto);
                @include col-num($i/2);
            }

        } @else if $i > 8 {

            @include _($i $i 8 4);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i/2 $i/2 8/2 4/2, auto);
                @include col-num($i/2);
            }

        } @else if $i > 4 {

            @include _($i $i $i 4);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i/2 $i/2 $i/2 4/2, auto);
                @include col-num($i/2);
            }

        } @else {

            @include _($i);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i, auto);
                @include col-num($i);
            }

        }

        // background: if($i > 10, darken($color__blue, ($i*0.25)), lighten($color__blue, (16/$i)));
        clear: both;

        div {
            // background: if($i > 10, lighten($color__blue, ($i*0.25)), darken($color__blue, (16/$i)));
            height: 100% !important;

            div {
                // background: if($i > 10, darken($color__blue, ($i*0.25)), lighten($color__blue, (16/$i)));
            }
        }
    }
}

.col-third {
    @include _(16/3 12/3 8/3 4/3);
    // background: $color__blue;

    &:before { content: "1/3"; }
}

.col-fourth {
    @include _(16/4 12/4 8/4 4/4);
    // background: $color__blue;

    &:before { content: "1/4"; }
}

.col-fifth {
    @include _(16/5 12/5 8/5 4/5);
    // background: $color__blue;

    &:before { content: "1/5"; }

    .col-fifth-child {
        @include _((16/5)/3 (12/5)/3 (8/5)/3 (4/5)/3, auto);
        height: 100% !important;
    }
}

div[class*="col"] {
    position: relative;
    font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    color: $color__yellow;
    height: 120px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 2em 0;
    outline: lighten($color__blue, 10%) solid 2px;

    &:before {
        position: absolute;
        top: 1em;
        left: 1em;
    }
}

section {
    background: $color__blue--darkest;
    // & + & { background: darken($color__blue--darkest, 5%); }
    // & + & + & { background: darken($color__blue--darkest, 10%); }
    // & + & + & + & { background: darken($color__blue--darkest, 15%); }
}

.container {
    @include _(container, clear);
}