$screen-xs-min:		480px !default;
$screen-sm-min:		768px !default;
$screen-md-min:		992px !default;
$screen-lg-min:		1200px !default;
$screen-xl-min:		1260px !default;

$screen-xs-max:		($screen-sm-min - 1) !default;
$screen-sm-max:		($screen-md-min - 1) !default;
$screen-md-max:		($screen-lg-min - 1) !default;
$screen-lg-max:		($screen-xl-min - 1) !default;

@mixin vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

// genera espaiats i mida dels dies per format quadricula
@mixin mk-cal-dies($width, $height) {
	width: #{$width}px;
	height: #{$height}px;

	// espai a l'esquerra en funcio del dia de la setmana
	@for $i from 0 through 6 {
		&.dsm-#{$i} {
			margin-left: #{$width * $i}px;
		}
	}
}

// ajusta i genera les mides per format quadricula
@mixin mk-cal-mes($width, $height, $padding: 0) {
	width: #{$width * 7 + $padding * 2}px;
	.cal-nomd ul li {
		margin: 0;
		width: #{$width}px;
	}
	.cal-dies ul {
		padding: #{$padding}px;
		li {
			@include mk-cal-dies($width, $height);
		}
	}
}


/////////////////////////////////////////////////////////////
// calendari anual: vista quadricula amb 2, 3 o 4 columnes //
/////////////////////////////////////////////////////////////
.cal-mes {
	position: relative;
	min-height: 1px;
	margin: 0 auto;
	margin-bottom: 15px;
	h4 {
		margin: 5px 0;
	}
}

// Noms dels dies de la setmana
.cal-nomd {
	border-top: medium none;
	clear: left;
	padding: 0;
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			float: left;
			margin: 0;
			position: relative;
			overflow: hidden;
			text-align: center;
			span.nomdia {
				@include vertical-align;
			}
		}
	}
}

.cal-cols {
	.cal-mes {
		.cal-nomd, .cal-dies {
			width: 100%;
		}
	}
}

.cal-mes {
	.cal-dies {
		clear: left;
		padding: 0;
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			li {
				float: left;
				margin: 0;
				position: relative;
				overflow: hidden;
			}
		}
	}

	li span.numdia {
		padding: 0;
		font-size: 100%;
		text-align: center;
		width: auto;
		display: block;
		@include vertical-align;
	}

	@include mk-cal-mes(40, 40, 2);
}

.cal-cols {
	.cal-mes {
		float: left;
		margin-right: 5px;
		margin-left: 5px;
		@include mk-cal-mes(40, 40, 2);
	}
}

@media (max-width: $screen-xs-max) {
	.cal-mes {
		@include mk-cal-mes(60, 60);
	}

	.cal-cols {
		.cal-mes {
			float: left;
			margin-right: 10px;
			margin-left: 10px;
			@include mk-cal-mes(30, 30);
		}

		.cal-2cols {
			clear:both;
		}
	}
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
	.cal-mes {
		@include mk-cal-mes(85, 60);

		li span.numdia {
			font-size: 12px;
			line-height: 12px;
		}
	}

	.cal-cols {
		.cal-mes {
			float: left;
			margin-right: 20px;
			margin-left: 20px;
			@include mk-cal-mes(30, 30);
		}

		.cal-2cols {
			clear:both;
		}
	}

}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
	.cal-cols {
		.cal-mes {
			float: left;
			//			margin-right: 15px;
			//			margin-left: 15px;
			//			@include mk-cal-mes(30, 30);
			margin-right: 20px;
			margin-left: 20px;
			@include mk-cal-mes(25, 30);
		}

		.cal-3cols {
			clear:both;
		}
	}
}

@media (min-width: $screen-lg-min) {
	.cal-cols {
		.cal-mes {
			float: left;
			margin-right: 10px;
			margin-left: 10px;
			@include mk-cal-mes(30, 30);
		}

		.cal-4cols {
			clear:both;
		}
	}
}

// Taasques
.cal-mes li.tasques {
	border: 2px solid #dc2f2c;

	&:hover {
		cursor: pointer;
		overflow: visible;
	}

	div.tasca {
		width: 320px;
		height: 290px;
		display: none;
		z-index: 10;
		border: 4px solid #ccc;
		background-color: #fff;
		padding: 10px;
		overflow: hidden;
		position: relative;
		cursor: default;
	}

	&:hover div.tasca {
		display: block;
	}
}

///////////////////////
// calendari: llista //
///////////////////////
.cal-llista {

	.cal-nomd {
		display: none;
	}

	.cal-dies {
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li {
			display: none;

			span.numdia {
				display: none;
			}

			&.tasques {
				display: block;
			}
		}
	}

	li.tasques div.tasca {
		display: block;
	}

	div.tasca dl {
		margin: 0 0 2em 0;
		padding: 0;

		dt {
			position: relative;
			left: 0;
			top: 1.5em;
			width: 5em;
			font-weight: bold;
		}

		dd {
			border-left: 1px solid #000;
			margin: 0 0 0 6em;
			padding: 0 0 .5em .5em;
		}
	}
}

@import "_colors";