/*
 * Name:			Grid
 * Description:		Provides a responsive, fluid and nestable grid
 *
 * Component:		`uk-grid`
 *					`uk-width-*`
 *					`uk-push-*`
 *					`uk-pull-*`
 *
 * Modifiers:		`uk-grid-divider`
 *					`uk-grid-margin`
 *					`uk-grid-preserve`
 *
 * Uses:			Panel: `uk-panel`
 *
 * Used by:			Dropdown
 *
 ========================================================================== */


/* Component
 ========================================================================== */

/*
 * Micro clearfix
 */

.uk-grid:before,
.uk-grid:after {
	content: " ";
	display: table;
}

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

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

.uk-grid {
	/* 1 */
	margin: 0 0 0 -@grid-gutter-horizontal;
	/* 2 */
	padding: 0;
	list-style: none;
}

/*
 * Vertical gutter
 */

.uk-grid + .uk-grid { margin-top: @grid-gutter-vertical; }


/* Grid column
 ========================================================================== */

/*
 * 1. Makes grid more robust so that it can be used with other block elements
 * 2. Create horizontal gutter
 * 3. `float` is set by default so columns always behave the same and create a new block format context
 */

.uk-grid > [class*='uk-width-'] {
	/* 1 */
	margin: 0;
	/* 2 */
	padding-left: @grid-gutter-horizontal;
	/* 3 */
	float: left;
}

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

.uk-grid > [class*='uk-width-'] > :last-child { margin-bottom: 0; }


/* Sub-modifier: `uk-grid-margin`
 ========================================================================== */

/*
 * This class is set by JavaScript and applies a vertical gutter if the columns stack or float into the next row
 * Higher specificity to override margin
 */

.uk-grid > .uk-grid-margin { margin-top: @grid-gutter-vertical; }


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

/*
 * Horizontal divider
 * Does not work with `uk-push-*`, `uk-pull-*` and not if the columns float into the next row
 */

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

.uk-grid-divider:not(:empty) > [class*='uk-width-'] {
	padding-left: @grid-gutter-horizontal;
	padding-right: @grid-gutter-horizontal;
}

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

/* Only tablets and desktop */
@media (min-width: @breakpoint-medium) {

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

}

/* Only desktop */
@media (min-width: @breakpoint-large) {

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

}

/*
 * Vertical divider
 */

.uk-grid-divider:empty {
	margin-top: @grid-gutter-vertical;
	margin-bottom: @grid-gutter-vertical;
	border-top: 1px solid @grid-divider-border;
}


/* Panel in grid
 ========================================================================== */

/*
 * Vertical gutter for panels
 */

.uk-grid > [class*='uk-width-'] > .uk-panel + .uk-panel { margin-top: @grid-gutter-vertical; }


/* Large gutter
 ========================================================================== */

/* Only large screens */
@media (min-width: @breakpoint-xlarge) {

	/*
	 * Grid
	 */

	/* Horizontal gutter */
	.uk-grid:not(.uk-grid-preserve) { margin-left: -@grid-large-gutter-horizontal; }
	.uk-grid:not(.uk-grid-preserve) > [class*='uk-width-'] { padding-left: @grid-large-gutter-horizontal; }

	/* Vertical gutter */
	.uk-grid:not(.uk-grid-preserve) + .uk-grid { margin-top: @grid-large-gutter-vertical; }
	.uk-grid:not(.uk-grid-preserve) > .uk-grid-margin { margin-top: @grid-large-gutter-vertical; }

	/* Vertical gutter for panels */
	.uk-grid:not(.uk-grid-preserve) > [class*='uk-width-'] > .uk-panel + .uk-panel { margin-top: @grid-large-gutter-vertical; }

	/*
	 * Modifier: `uk-grid-divider`
	 */

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

	.uk-grid-divider:not(.uk-grid-preserve):not(:empty) > [class*='uk-width-'] {
		padding-left: @grid-large-gutter-horizontal;
		padding-right: @grid-large-gutter-horizontal;
	}

	.uk-grid-divider:not(.uk-grid-preserve):empty {
		margin-top: @grid-large-gutter-vertical;
		margin-bottom: @grid-large-gutter-vertical
	}

}


/* Sub-object: `uk-width-*`
 ========================================================================== */


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

/*
 * Widths
 */

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

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

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

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

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

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

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


/* Only tablets and desktop */
@media (min-width: @breakpoint-medium) {

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

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

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

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

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

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

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

}

/* Only desktop */
@media (min-width: @breakpoint-large) {

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

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

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

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

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

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

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

}


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

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

/* Only tablets and desktop */
@media (min-width: @breakpoint-medium) {

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

	/*
	 * Push
	 */

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

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

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

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

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

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


	/*
	 * Pull
	 */

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

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

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

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

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

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

}