/**
 * Imports :
 */
// @import 'compass/reset';
// @import 'compass/css3';

/**
 * Import grid settings :
 * This to be able to use gridle mixins, etc...
 */
@import 'grid-settings';

/**
 * Resets
 */
@import 'tools/reset';

/**
 * Variables
 */
@import 'variables';

body {
	overflow-x: hidden;
}

.container {
	@include gridle_container();
}

.component {
	background: red;
	min-height: 100px;
	transition: all .2s ease-in-out;
	
	@include gridle_eq(+450px) {
		background: pink;
	}
	@include gridle_eq(-400px) {
		background: blue;
	}
	@include gridle_eq(-200px) {
		background: green;
	}
}

.module {
	$context : (
		context : 50
	);
	@include gridle_layout((
		'.header' : 30 at 10 tablet 20 at 5,
		'.login' : 10 tablet 20 no-gutter,
		'.content' : 40,
		'.sidebar' : 10,
		'.footer' : 50
	), $context);
}

/**
 * Basic formatting :
 */
html {
	font:11px/1.5 'Helvetica Neue', Verdana, sans-serif;
	color: darken($primary-color, 60%);
}
#header {
	background-image:url('http://gridle.org/assets/img/highlight-bkg-04.jpg?1443433037');
	background-size:cover;
	background-position:50% 50%;
	min-height:150px;
	color: white;
	padding:50px 0;
	line-height:1;

	&, * {
		text-shadow:rgba(0,0,0,1) 0 0 10px;
	}
}
#head {
	background: $light;
	margin-bottom:50px;
	padding: 50px 0;
}
.separator {
	width:100%;
	height:1px;
	background: $primary-color;
	margin-bottom:50px;
	margin-top:50px;
}
#top-bar {
	background: black;
}


/**
 * Colors
 */
.complementary {
	color: $complementary;
}
.red {
	color: $red;
}
.blue {
	color: $blue;
}
.green {
	color: $green;
}
.bg-color {
	padding:2px 5px;
	border-radius:3px;
	color: white;
}
.bg-complementary {
	@extend .bg-color;
	background: $complementary;
}
.bg-red {
	@extend .bg-color;
	background: $red;
}
.bg-blue {
	@extend .bg-color;
	background: $blue;
}
.bg-green {
	@extend .bg-color;
	background: $green;
}


/**
 * Typography
 */
.h1 {
	font-size:50px;
	font-weight:100;
}
.h2 {
	margin: 0 0 15px 0;
	font-size:30px;
}
.h3 {
	margin: 0 0 10px 0;
	font-size: 20px;
}
.p {
	margin-bottom: 20px;
	font-size:16px;
	color: darken($primary-color, 35%);
}
.subtitle {
	font-size:30px;
	font-weight:200;
}
.heading {
	font-size:20px;
}
a {
	color: darken($complementary,5%);
	text-decoration: none;
}
small {
	font-size:0.6em;
}


/**
 * Prism
 */
pre {
	background-color: $primary-color !important;
}


/**
 * State selector
 */
.selector {
	margin-bottom: 15px;
	padding:5px;
	border-radius:3px;
	display:inline-block;
	margin-right:10px;
	background:$complementary;


	li {
		color:darken($complementary,60%);
		display:inline-block;
		padding:5px 10px;
		border-radius:3px;
		cursor:pointer;
		margin-right: 2px;

		// @each $stateName in gridle_get_registered_states_names() {
		// 	@if $stateName != default {
		// 		@include gridle_state($stateName) {
		// 			&[data-state="#{$stateName}"] {
		// 				outline: 2px solid $red;
		// 			}
		// 		}
		// 	}
		// }

		&.active {
			color: white;
			background:darken($complementary,20%) !important;
		}
	}

	&.selector--options {
		background:lighten($braun,20%);

		li {
			color:darken($braun,60%);
			background:$braun;

			&.active {
				background:darken($braun,20%) !important;
				color: white;
			}
		}
	}

	@include gridle_state(mobile) {
		display:block;
		margin:0 0 15px 0;

		li {
			display: block;
			padding:10px;
		}
	}
}


/**
 * Debug grid
 */
.gridle-debug {
	margin-bottom:50px;

	[class*="gr-"] {
		background: $primary-color;
		border: 1px solid darken($primary-color, 5%);
		padding-top: 10px;
		padding-bottom: 10px;

		&:before {
			display:block;
			content: attr(class);
			font-weight: bold;
		}
	}
	[class*="push-"],
	[class*="prefix-"] {
		background: darken($primary-color, 15%);
	}
	[class*="pull-"],
	[class*="suffix-"] {
		background: darken($primary-color, 20%);
	}

	[class="row"],
	[class="col"] {
		padding-top: 0;
		padding-bottom: 0;
	}
}
.no-debug-class {
	[class*="gr-"]:before,
	&:before {
		content: "" !important;
	}
}

/**
 * Placeholders
 */
.img-placeholder {
	display:inline-block;
	width:50px;
	height:50px;
	border-radius:50%;
	background:darken($primary-color, 10%);
}


/**
 * List
 */
.list {
	&.list--inline {
		.list__item {
			display:inline-block;
		}
	}
}

	.list__title {
		font-weight:bold;
		font-size:16px;
	}
	.list__description {
		font-size:12px;
	}
	.list__image {
		@extend .img-placeholder;
		background-size:cover;
		background-position:50% 50%;
	}
	.list__sharings {
		font-size:20px !important;
	}


/**
 * List top bar
 */
.list--top-bar {
	
	@extend .list--inline;

	.list__item {

		a {
			display: inline-block;
			padding:10px;

			&:hover,
			&.active {
				color: white;
				background: $orange;
				text-shadow:rgba(0,0,0,.3) 1px 1px 0;
			}
		}
	}
}


/**
 * Gridle set sample :
 */
#myCoolItem {
	@include gridle_set((
		grid : 8,
		push : 2,
		tablet : (
			grid : 12,
		 	push : 0
		),
		mobile : (
			grid : 12,
			visible : false
		)
	));
}