//== Dependencies
@import (optional) "../../node_modules/gee.less/gee";
@import (optional) "../../../../node_modules/gee.less/gee";
@import (optional) "../../node_modules/dotsunited-equal-height-blocks/lib/mixins";
@import (optional) "../../../../node_modules/dotsunited-equal-height-blocks/lib/mixins";

@hdeng-grid-gutter: @hdeng-gutter;
@hdeng-grid-background-font-color: @hdeng-body-font-default-color;
@hdeng-grid-background-highlight-font-color: @hdeng-body-font-highlight-color;

//== Generates
.hdeng-grid-critical-generate() {
    // Silence
}

.hdeng-grid-generate() {
    .grid {
        margin-bottom: @hdeng-spacing;
    }

    .grid-background {
        .hdeng-box();
    }

    .grid-background-highlight {
        .hdeng-box();
        .hdeng-box-highlight();
    }

    .grid-background,
    .grid-background-highlight {
        margin-top: 0;

        h1, h2, h3, h4, h5, h6 {
            color: @hdeng-grid-background-highlight-font-color;
        }

        a {
            color: @hdeng-header-font-contrast-color;
            &:hover {
                color: @hdeng-header-font-contrast-color;
            }
        }

        &.grid {
            padding-bottom: 0;
        }
    }

    .grid-shadow {
        box-shadow: 0 0 floor(@hdeng-spacing / 2) rgba(0, 0, 0, .5);
        padding: @hdeng-spacing;

        &.grid {
            padding-bottom: 0;
        }
    }

    .grid-equal-height {
        .grid-container {
            .dotsunited-equal-height-blocks-container();
        }
    }

    .gee-generate(
        @gutter: @hdeng-grid-gutter;
        @class-prefix: grid-;
        @grid-class: container;
        @unit-class: unit;
        @unit-font-family: @hdeng-base-font-family
    );

    [class*=grid-unit] {
        margin-bottom: @hdeng-spacing;

        @media (max-width: @hdeng-breakpoint-default) {
            .gee-unit-width(12, 12, @hdeng-grid-gutter);
        }

        :first-child {
            margin-top: 0;
        }

        :last-child {
            margin-bottom: 0;
        }

        img {
            // Do not use .hdeng-img-responsive(), it sets width to auto and
            // display to block which is not desired!
            height: auto;
            max-width: 100%;
        }
    }
}
