// Name:            Column
// Description:     Provides a responsive, fluid and nestable columns for text and inline elements
//
// Component:       `wk-column`
//
// Modifiers:       `wk-column-small`
//                  `wk-column-medium-*`
//
// ========================================================================


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

@column-gutter:                                   25px;


/* ========================================================================
   Component: Column
 ========================================================================== */

[class*='wk-column-'] {
    -webkit-column-gap: @column-gutter;
    -moz-column-gap: @column-gutter;
    column-gap: @column-gutter;
    .hook-column;
}


/* Width modifiers
 ========================================================================== */

.wk-column-1-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.wk-column-1-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.wk-column-1-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

.wk-column-1-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
}

.wk-column-1-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
}

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

    .wk-column-small-1-2 {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .wk-column-small-1-3 {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .wk-column-small-1-4 {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    .wk-column-small-1-5 {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }

    .wk-column-small-1-6 {
        -webkit-column-count: 6;
        -moz-column-count: 6;
        column-count: 6;
    }

}

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

    .wk-column-medium-1-2 {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .wk-column-medium-1-3 {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .wk-column-medium-1-4 {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    .wk-column-medium-1-5 {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }

    .wk-column-medium-1-6 {
        -webkit-column-count: 6;
        -moz-column-count: 6;
        column-count: 6;
    }

}

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

    .wk-column-large-1-2 {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .wk-column-large-1-3 {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .wk-column-large-1-4 {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    .wk-column-large-1-5 {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }

    .wk-column-large-1-6 {
        -webkit-column-count: 6;
        -moz-column-count: 6;
        column-count: 6;
    }

}

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

    .wk-column-xlarge-1-2 {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .wk-column-xlarge-1-3 {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .wk-column-xlarge-1-4 {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    .wk-column-xlarge-1-5 {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }

    .wk-column-xlarge-1-6 {
        -webkit-column-count: 6;
        -moz-column-count: 6;
        column-count: 6;
    }
}


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

.hook-column-misc;

.hook-column() {}
.hook-column-misc() {}
