// Name:            Column
// Description:     Utilities for text columns
//
// Component:       `uk-column-*`
//
// Sub-objects:     `uk-column-span`
//
// Modifiers:       `uk-column-divider`
//
// ========================================================================


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

@column-gutter:                                 @global-gutter;
@column-gutter-l:                               @global-medium-gutter;

@column-divider-rule-color:                     @global-border;
@column-divider-rule-width:                     1px;


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

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

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

    [class*='uk-column-'] {
        -webkit-column-gap: @column-gutter-l;
        -moz-column-gap: @column-gutter-l;
        column-gap: @column-gutter-l;
    }

}

/*
 * Fix image 1px line wrapping into the next column in Chrome
 */

[class*='uk-column-'] img { transform: translate3d(0,0,0); }


/* Divider
 ========================================================================== */

/*
 * 1. Double the column gap
 */

.uk-column-divider {
    -webkit-column-rule: @column-divider-rule-width solid @column-divider-rule-color;
    -moz-column-rule: @column-divider-rule-width solid @column-divider-rule-color;
    column-rule: @column-divider-rule-width solid @column-divider-rule-color;
    /* 1 */
    -webkit-column-gap: (@column-gutter * 2);
    -moz-column-gap: (@column-gutter * 2);
    column-gap: (@column-gutter * 2);
}

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

    .uk-column-divider {
        -webkit-column-gap: (@column-gutter-l * 2);
        -moz-column-gap: (@column-gutter-l * 2);
        column-gap: (@column-gutter-l * 2);
    }

}


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

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

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

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

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

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

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

    .uk-column-1-2\@s {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .uk-column-1-3\@s {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .uk-column-1-4\@s {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    .uk-column-1-5\@s {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }

    .uk-column-1-6\@s {
        -webkit-column-count: 6;
        -moz-column-count: 6;
        column-count: 6;
    }

}

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

    .uk-column-1-2\@m {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .uk-column-1-3\@m {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .uk-column-1-4\@m {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    .uk-column-1-5\@m {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }

    .uk-column-1-6\@m {
        -webkit-column-count: 6;
        -moz-column-count: 6;
        column-count: 6;
    }

}

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

    .uk-column-1-2\@l {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .uk-column-1-3\@l {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .uk-column-1-4\@l {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    .uk-column-1-5\@l {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }

    .uk-column-1-6\@l {
        -webkit-column-count: 6;
        -moz-column-count: 6;
        column-count: 6;
    }

}

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

    .uk-column-1-2\@xl {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .uk-column-1-3\@xl {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .uk-column-1-4\@xl {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    .uk-column-1-5\@xl {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }

    .uk-column-1-6\@xl {
        -webkit-column-count: 6;
        -moz-column-count: 6;
        column-count: 6;
    }
}


/* Make element span across all columns
 * Does not work in Firefox yet
 ========================================================================== */

.uk-column-span {
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}


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

.hook-column-misc;

.hook-column-misc() {}


// Inverse
// ========================================================================

@inverse-column-divider-rule-color:                    @inverse-global-border;

.hook-inverse() {

    .uk-column-divider {
        -webkit-column-rule-color: @inverse-column-divider-rule-color;
        -moz-column-rule-color: @inverse-column-divider-rule-color;
        column-rule-color: @inverse-column-divider-rule-color;
    }

}