// Name:            Grid
// Description:     Provides a responsive, fluid and nestable grid
//
// Component:       `wk-grid`
//                  `wk-width-*`
//                  `wk-push-*`
//                  `wk-pull-*`
//
// Modifiers:       `wk-grid-collapse`
//                  `wk-grid-small`
//                  `wk-grid-medium`
//                  `wk-grid-large`
//                  `wk-grid-divider`
//                  `wk-grid-margin`
//                  `wk-grid-match`
//                  `wk-grid-width-*`
//
// Uses:            Panel: `wk-panel`
//
// Used by:         Dropdown
//
// Markup:
//
// <!-- wk-grid -->
// <div class="wk-grid">
//     <div class="wk-width-1-2"></div>
//     <div class="wk-width-1-2"></div>
// </div>
//
// <!-- wk-grid-divider -->
// <div class="wk-grid wk-grid-divider">
//     <div class="wk-width-1-2"></div>
//     <div class="wk-width-1-2"></div>
// </div>
// <hr class="wk-grid-divider">
// <div class="wk-grid wk-grid-divider">
//     <div class="wk-width-1-2"></div>
//     <div class="wk-width-1-2"></div>
// </div>
//
// ========================================================================


// Variables
// ========================================================================

@grid-gutter-horizontal:                        25px;
@grid-gutter-vertical:                          25px;

@grid-gutter-large-horizontal:                  35px;
@grid-gutter-large-vertical:                    35px;

@grid-gutter-xlarge-horizontal:                 50px;
@grid-gutter-xlarge-vertical:                   50px;

@grid-gutter-small-horizontal:                  10px;
@grid-gutter-small-vertical:                    10px;

@grid-divider-border:                           #ddd;
@grid-divider-border-width:                     1px;


/* ========================================================================
   Component: Grid
 ========================================================================== */

/*
 * 1. Makes grid more robust so that it can be used with other block elements like lists
 */

.wk-grid {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    /* 1 */
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * DEPRECATED
 * Micro clearfix
 * Can't use `table` because it creates a 1px gap when it becomes a flex item, only in Webkit
 */

.wk-grid:before,
.wk-grid:after {
    content: "";
    display: block;
    overflow: hidden;
}

.wk-grid:after { clear: both; }

/*
 * Grid cell
 * 1. Space is allocated solely based on content dimensions
 * 2. Makes grid more robust so that it can be used with other block elements
 * 3. DEPRECATED Using `float` to support IE9
 */

.wk-grid > * {
    /* 1 */
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
    /* 2 */
    margin: 0;
    /* 3 */
    float: left;
}

/*
 * Remove margin from the last-child
 */

.wk-grid > * > :last-child { margin-bottom: 0; }


/* Grid gutter
 ========================================================================== */

/*
 * Default gutter
 */

/* Horizontal */
.wk-grid { margin-left: -@grid-gutter-horizontal; }
.wk-grid > * { padding-left: @grid-gutter-horizontal; }

/* Vertical */
.wk-grid + .wk-grid,
.wk-grid-margin,
.wk-grid > * > .wk-panel + .wk-panel { margin-top: @grid-gutter-vertical; }

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    /* Horizontal */
    .wk-grid { margin-left: -@grid-gutter-large-horizontal; }
    .wk-grid > * { padding-left: @grid-gutter-large-horizontal; }

    /* Vertical */
    .wk-grid + .wk-grid,
    .wk-grid-margin,
    .wk-grid > * > .wk-panel + .wk-panel { margin-top: @grid-gutter-large-vertical; }

}

/*
 * Collapse gutter
 */

/* Horizontal */
.wk-grid-collapse { margin-left: 0; }
.wk-grid-collapse > * { padding-left: 0; }

/* Vertical */
.wk-grid-collapse + .wk-grid-collapse,
.wk-grid-collapse > .wk-grid-margin,
.wk-grid-collapse > * > .wk-panel + .wk-panel { margin-top: 0; }

/*
 * Small gutter
 */

/* Horizontal */
.wk-grid-small { margin-left: -@grid-gutter-small-horizontal; }
.wk-grid-small > * { padding-left: @grid-gutter-small-horizontal; }

/* Vertical */
.wk-grid-small + .wk-grid-small,
.wk-grid-small > .wk-grid-margin,
.wk-grid-small > * > .wk-panel + .wk-panel { margin-top: @grid-gutter-small-vertical; }

/*
 * Medium gutter
 */

/* Horizontal */
.wk-grid-medium { margin-left: -@grid-gutter-horizontal; }
.wk-grid-medium > * { padding-left: @grid-gutter-horizontal; }

/* Vertical */
.wk-grid-medium + .wk-grid-medium,
.wk-grid-medium > .wk-grid-margin,
.wk-grid-medium > * > .wk-panel + .wk-panel { margin-top: @grid-gutter-vertical; }


/*
 * Large gutter
 */

/* Large screen and bigger */
@media (min-width: @breakpoint-large) {

    /* Horizontal */
    .wk-grid-large { margin-left: -@grid-gutter-large-horizontal; }
    .wk-grid-large > * { padding-left: @grid-gutter-large-horizontal; }

    /* Vertical */
    .wk-grid-large + .wk-grid-large,
    .wk-grid-large-margin,
    .wk-grid-large > * > .wk-panel + .wk-panel { margin-top: @grid-gutter-large-vertical; }

}

/* Extra Large screens */
@media (min-width: @breakpoint-xlarge) {

    /* Horizontal */
    .wk-grid-large { margin-left: -@grid-gutter-xlarge-horizontal; }
    .wk-grid-large > * { padding-left: @grid-gutter-xlarge-horizontal; }

    /* Vertical */
    .wk-grid-large + .wk-grid-large,
    .wk-grid-large-margin,
    .wk-grid-large > * > .wk-panel + .wk-panel { margin-top: @grid-gutter-xlarge-vertical; }

}


/* Modifier: `wk-grid-divider`
 ========================================================================== */

/*
 * Horizontal divider
 * Only works with the default gutter. Does not work with gutter collapse, small or large.
 * Does not work with `wk-push-*`, `wk-pull-*` and not if the columns float into the next row.
 */

.wk-grid-divider:not(:empty) {
    margin-left: -@grid-gutter-horizontal;
    margin-right: -@grid-gutter-horizontal;
}

.wk-grid-divider > * {
    padding-left: @grid-gutter-horizontal;
    padding-right: @grid-gutter-horizontal;
}

.wk-grid-divider > [class*='wk-width-1-']:not(.wk-width-1-1):nth-child(n+2),
.wk-grid-divider > [class*='wk-width-2-']:nth-child(n+2),
.wk-grid-divider > [class*='wk-width-3-']:nth-child(n+2),
.wk-grid-divider > [class*='wk-width-4-']:nth-child(n+2),
.wk-grid-divider > [class*='wk-width-5-']:nth-child(n+2),
.wk-grid-divider > [class*='wk-width-6-']:nth-child(n+2),
.wk-grid-divider > [class*='wk-width-7-']:nth-child(n+2),
.wk-grid-divider > [class*='wk-width-8-']:nth-child(n+2),
.wk-grid-divider > [class*='wk-width-9-']:nth-child(n+2) { border-left: @grid-divider-border-width solid @grid-divider-border; }

/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {

    .wk-grid-divider > [class*='wk-width-medium-']:not(.wk-width-medium-1-1):nth-child(n+2) { border-left: @grid-divider-border-width solid @grid-divider-border; }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .wk-grid-divider > [class*='wk-width-large-']:not(.wk-width-large-1-1):nth-child(n+2) { border-left: @grid-divider-border-width solid @grid-divider-border; }

}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    /*
     * Large gutter
     */

    .wk-grid-divider:not(:empty) {
        margin-left: -@grid-gutter-large-horizontal;
        margin-right: -@grid-gutter-large-horizontal;
    }

    .wk-grid-divider > * {
        padding-left: @grid-gutter-large-horizontal;
        padding-right: @grid-gutter-large-horizontal;
    }

    .wk-grid-divider:empty {
        margin-top: @grid-gutter-large-vertical;
        margin-bottom: @grid-gutter-large-vertical;
    }

}

/*
 * Vertical divider
 */

.wk-grid-divider:empty {
    margin-top: @grid-gutter-vertical;
    margin-bottom: @grid-gutter-vertical;
    border-top: @grid-divider-border-width solid @grid-divider-border;
}

/* Match panels in grids
 ========================================================================== */

/*
 * 1. Behave like a block element
 */

.wk-grid-match > * {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* 1 */
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.wk-grid-match > * > * {
    /* 1 */
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 100%;
}


/* Even grid cell widths
 ========================================================================== */

[class*='wk-grid-width'] > * {
    box-sizing: border-box;
    width: 100%;
}

.wk-grid-width-1-2 > * { width: 50%; }
.wk-grid-width-1-3 > * { width: 33.333%; }
.wk-grid-width-1-4 > * { width: 25%; }
.wk-grid-width-1-5 > * { width: 20%; }
.wk-grid-width-1-6 > * { width: 16.666%; }
.wk-grid-width-1-10 > * { width: 10%; }

.wk-grid-width-auto > * { width: auto; }

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .wk-grid-width-small-1-1 > * { width: 100%; }
    .wk-grid-width-small-1-2 > * { width: 50%; }
    .wk-grid-width-small-1-3 > * { width: 33.333%; }
    .wk-grid-width-small-1-4 > * { width: 25%; }
    .wk-grid-width-small-1-5 > * { width: 20%; }
    .wk-grid-width-small-1-6 > * { width: 16.666%; }
    .wk-grid-width-small-1-10 > * { width: 10%; }

}

/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {

    .wk-grid-width-medium-1-1 > * { width: 100%; }
    .wk-grid-width-medium-1-2 > * { width: 50%; }
    .wk-grid-width-medium-1-3 > * { width: 33.333%; }
    .wk-grid-width-medium-1-4 > * { width: 25%; }
    .wk-grid-width-medium-1-5 > * { width: 20%; }
    .wk-grid-width-medium-1-6 > * { width: 16.666%; }
    .wk-grid-width-medium-1-10 > * { width: 10%; }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .wk-grid-width-large-1-1 > * { width: 100%; }
    .wk-grid-width-large-1-2 > * { width: 50%; }
    .wk-grid-width-large-1-3 > * { width: 33.333%; }
    .wk-grid-width-large-1-4 > * { width: 25%; }
    .wk-grid-width-large-1-5 > * { width: 20%; }
    .wk-grid-width-large-1-6 > * { width: 16.666%; }
    .wk-grid-width-large-1-10 > * { width: 10%; }

}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    .wk-grid-width-xlarge-1-1 > * { width: 100%; }
    .wk-grid-width-xlarge-1-2 > * { width: 50%; }
    .wk-grid-width-xlarge-1-3 > * { width: 33.333%; }
    .wk-grid-width-xlarge-1-4 > * { width: 25%; }
    .wk-grid-width-xlarge-1-5 > * { width: 20%; }
    .wk-grid-width-xlarge-1-6 > * { width: 16.666%; }
    .wk-grid-width-xlarge-1-10 > * { width: 10%; }

}


/* Sub-objects: `wk-width-*`
 ========================================================================== */

[class*='wk-width'] {
    box-sizing: border-box;
    width: 100%;
}

/*
 * Widths
 */

/* Whole */
.wk-width-1-1 { width: 100%; }

/* Halves */
.wk-width-1-2,
.wk-width-2-4,
.wk-width-3-6,
.wk-width-5-10 { width: 50%; }

/* Thirds */
.wk-width-1-3,
.wk-width-2-6 { width: 33.333%; }
.wk-width-2-3,
.wk-width-4-6 { width: 66.666%; }

/* Quarters */
.wk-width-1-4 { width: 25%; }
.wk-width-3-4 { width: 75%; }

/* Fifths */
.wk-width-1-5,
.wk-width-2-10 { width: 20%; }
.wk-width-2-5,
.wk-width-4-10 { width: 40%; }
.wk-width-3-5,
.wk-width-6-10 { width: 60%; }
.wk-width-4-5,
.wk-width-8-10 { width: 80%; }

/* Sixths */
.wk-width-1-6 { width: 16.666%; }
.wk-width-5-6 { width: 83.333%; }

/* Tenths */
.wk-width-1-10 { width: 10%; }
.wk-width-3-10 { width: 30%; }
.wk-width-7-10 { width: 70%; }
.wk-width-9-10 { width: 90%; }

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    /* Whole */
    .wk-width-small-1-1 { width: 100%; }

    /* Halves */
    .wk-width-small-1-2,
    .wk-width-small-2-4,
    .wk-width-small-3-6,
    .wk-width-small-5-10 { width: 50%; }

    /* Thirds */
    .wk-width-small-1-3,
    .wk-width-small-2-6 { width: 33.333%; }
    .wk-width-small-2-3,
    .wk-width-small-4-6 { width: 66.666%; }

    /* Quarters */
    .wk-width-small-1-4 { width: 25%; }
    .wk-width-small-3-4 { width: 75%; }

    /* Fifths */
    .wk-width-small-1-5,
    .wk-width-small-2-10 { width: 20%; }
    .wk-width-small-2-5,
    .wk-width-small-4-10 { width: 40%; }
    .wk-width-small-3-5,
    .wk-width-small-6-10 { width: 60%; }
    .wk-width-small-4-5,
    .wk-width-small-8-10 { width: 80%; }

    /* Sixths */
    .wk-width-small-1-6 { width: 16.666%; }
    .wk-width-small-5-6 { width: 83.333%; }

    /* Tenths */
    .wk-width-small-1-10 { width: 10%; }
    .wk-width-small-3-10 { width: 30%; }
    .wk-width-small-7-10 { width: 70%; }
    .wk-width-small-9-10 { width: 90%; }

}

/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {

    /* Whole */
    .wk-width-medium-1-1 { width: 100%; }

    /* Halves */
    .wk-width-medium-1-2,
    .wk-width-medium-2-4,
    .wk-width-medium-3-6,
    .wk-width-medium-5-10 { width: 50%; }

    /* Thirds */
    .wk-width-medium-1-3,
    .wk-width-medium-2-6 { width: 33.333%; }
    .wk-width-medium-2-3,
    .wk-width-medium-4-6 { width: 66.666%; }

    /* Quarters */
    .wk-width-medium-1-4 { width: 25%; }
    .wk-width-medium-3-4 { width: 75%; }

    /* Fifths */
    .wk-width-medium-1-5,
    .wk-width-medium-2-10 { width: 20%; }
    .wk-width-medium-2-5,
    .wk-width-medium-4-10 { width: 40%; }
    .wk-width-medium-3-5,
    .wk-width-medium-6-10 { width: 60%; }
    .wk-width-medium-4-5,
    .wk-width-medium-8-10 { width: 80%; }

    /* Sixths */
    .wk-width-medium-1-6 { width: 16.666%; }
    .wk-width-medium-5-6 { width: 83.333%; }

    /* Tenths */
    .wk-width-medium-1-10 { width: 10%; }
    .wk-width-medium-3-10 { width: 30%; }
    .wk-width-medium-7-10 { width: 70%; }
    .wk-width-medium-9-10 { width: 90%; }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    /* Whole */
    .wk-width-large-1-1 { width: 100%; }

    /* Halves */
    .wk-width-large-1-2,
    .wk-width-large-2-4,
    .wk-width-large-3-6,
    .wk-width-large-5-10 { width: 50%; }

    /* Thirds */
    .wk-width-large-1-3,
    .wk-width-large-2-6 { width: 33.333%; }
    .wk-width-large-2-3,
    .wk-width-large-4-6 { width: 66.666%; }

    /* Quarters */
    .wk-width-large-1-4 { width: 25%; }
    .wk-width-large-3-4 { width: 75%; }

    /* Fifths */
    .wk-width-large-1-5,
    .wk-width-large-2-10 { width: 20%; }
    .wk-width-large-2-5,
    .wk-width-large-4-10 { width: 40%; }
    .wk-width-large-3-5,
    .wk-width-large-6-10 { width: 60%; }
    .wk-width-large-4-5,
    .wk-width-large-8-10 { width: 80%; }

    /* Sixths */
    .wk-width-large-1-6 { width: 16.666%; }
    .wk-width-large-5-6 { width: 83.333%; }

    /* Tenths */
    .wk-width-large-1-10 { width: 10%; }
    .wk-width-large-3-10 { width: 30%; }
    .wk-width-large-7-10 { width: 70%; }
    .wk-width-large-9-10 { width: 90%; }

}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    /* Whole */
    .wk-width-xlarge-1-1 { width: 100%; }

    /* Halves */
    .wk-width-xlarge-1-2,
    .wk-width-xlarge-2-4,
    .wk-width-xlarge-3-6,
    .wk-width-xlarge-5-10 { width: 50%; }

    /* Thirds */
    .wk-width-xlarge-1-3,
    .wk-width-xlarge-2-6 { width: 33.333%; }
    .wk-width-xlarge-2-3,
    .wk-width-xlarge-4-6 { width: 66.666%; }

    /* Quarters */
    .wk-width-xlarge-1-4 { width: 25%; }
    .wk-width-xlarge-3-4 { width: 75%; }

    /* Fifths */
    .wk-width-xlarge-1-5,
    .wk-width-xlarge-2-10 { width: 20%; }
    .wk-width-xlarge-2-5,
    .wk-width-xlarge-4-10 { width: 40%; }
    .wk-width-xlarge-3-5,
    .wk-width-xlarge-6-10 { width: 60%; }
    .wk-width-xlarge-4-5,
    .wk-width-xlarge-8-10 { width: 80%; }

    /* Sixths */
    .wk-width-xlarge-1-6 { width: 16.666%; }
    .wk-width-xlarge-5-6 { width: 83.333%; }

    /* Tenths */
    .wk-width-xlarge-1-10 { width: 10%; }
    .wk-width-xlarge-3-10 { width: 30%; }
    .wk-width-xlarge-7-10 { width: 70%; }
    .wk-width-xlarge-9-10 { width: 90%; }

}


/* Sub-object: `wk-push-*` and `wk-pull-*`
 ========================================================================== */

/*
 * Source ordering
 * Works only with `wk-width-medium-*`
 */

/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {

    [class*='wk-push-'],
    [class*='wk-pull-'] { position: relative; }

    /*
     * Push
     */

    /* Halves */
    .wk-push-1-2,
    .wk-push-2-4,
    .wk-push-3-6,
    .wk-push-5-10 { left: 50%; }

    /* Thirds */
    .wk-push-1-3,
    .wk-push-2-6 { left: 33.333%; }
    .wk-push-2-3,
    .wk-push-4-6 { left: 66.666%; }

    /* Quarters */
    .wk-push-1-4 { left: 25%; }
    .wk-push-3-4 { left: 75%; }

    /* Fifths */
    .wk-push-1-5,
    .wk-push-2-10 { left: 20%; }
    .wk-push-2-5,
    .wk-push-4-10 { left: 40%; }
    .wk-push-3-5,
    .wk-push-6-10 { left: 60%; }
    .wk-push-4-5,
    .wk-push-8-10 { left: 80%; }

    /* Sixths */
    .wk-push-1-6 { left: 16.666%; }
    .wk-push-5-6 { left: 83.333%; }

    /* Tenths */
    .wk-push-1-10 { left: 10%; }
    .wk-push-3-10 { left: 30%; }
    .wk-push-7-10 { left: 70%; }
    .wk-push-9-10 { left: 90%; }

    /*
     * Pull
     */

     /* Halves */
     .wk-pull-1-2,
     .wk-pull-2-4,
     .wk-pull-3-6,
     .wk-pull-5-10 { left: -50%; }

     /* Thirds */
     .wk-pull-1-3,
     .wk-pull-2-6 { left: -33.333%; }
     .wk-pull-2-3,
     .wk-pull-4-6 { left: -66.666%; }

     /* Quarters */
     .wk-pull-1-4 { left: -25%; }
     .wk-pull-3-4 { left: -75%; }

     /* Fifths */
     .wk-pull-1-5,
     .wk-pull-2-10 { left: -20%; }
     .wk-pull-2-5,
     .wk-pull-4-10 { left: -40%; }
     .wk-pull-3-5,
     .wk-pull-6-10 { left: -60%; }
     .wk-pull-4-5,
     .wk-pull-8-10 { left: -80%; }

     /* Sixths */
     .wk-pull-1-6 { left: -16.666%; }
     .wk-pull-5-6 { left: -83.333%; }

     /* Tenths */
     .wk-pull-1-10 { left: -10%; }
     .wk-pull-3-10 { left: -30%; }
     .wk-pull-7-10 { left: -70%; }
     .wk-pull-9-10 { left: -90%; }

}


// Hooks
// ========================================================================

.hook-grid-misc;

.hook-grid-misc() {}
