@import "compass";
@import "mixins";

/* ---------- Mixins ---------- */

@mixin default-border-radius {
	@include border-radius(4px);
}

@mixin keyframes($name) {
	@-o-keyframes #{$name} {
		@content;
	}

	@-moz-keyframes #{$name} {
		@content;
	}

	@-webkit-keyframes #{$name} {
		@content;
	}

	@keyframes #{$name} {
		@content;
	}
}

@include keyframes(shakeReminderCount) {
	0% {
		@include transform(rotate(5deg));
	}

	25% {
		@include transform(translate(3px, -4px), rotate(0));
	}

	50% {
		@include transform(rotate(-5deg));
	}

	75% {
		@include transform(rotate(0));
	}

	100% {
		@include transform(translate(0, 0), rotate(5deg));
	}
}

/* ---------- Dockbar & reminders portlet ---------- */

.dockbar-user-reminders, .viewerreminders-portlet {
	.all-reminders .user-reminder,  .not-marked-as-done .user-reminder {
		&, &.archived {
			&:hover, &.hover {
				background-color: #F3F3F3;
				cursor: pointer;

				.mark-as-done, .delete, .mark-as-undone {
					display: block;
				}
			}
		}
	}
	
	.all-reminders .user-reminder {
		&, &.archived {
			&:hover, &.hover {
				background-color: #F3F3F3;
				cursor: pointer;

				/*.mark-as-done {
					display: none;
				}*/
			}
		}
	}	
	
	.not-marked-as-done .user-reminder {
		&, &.archived {
			&:hover, &.hover {
				background-color: #F3F3F3;
				cursor: pointer;

				.mark-as-undone {
					display: none;
				}
			}
		}
	}	

	.not-marked-as-done .timestamp {
		/*display: none;*/
	}

	.user-reminders-list {
		list-style: none;
		padding: 5px;

		.pagination, .message {
			padding: 5px;
			text-align: center;

			.left-nav {
				float: left;
				padding: 0 10px;
			}

			.right-nav {
				float: right;
				padding: 0 10px;
			}

			a {
				border-radius: 4px;
				display: inline;
				margin: 2px 2px;
				padding: 5px 5px;
			}

			a:hover {
				text-decoration: none;
			}

			.disabled a {
				color: #FFF;
				cursor: default;
			}
		}

		.message {
			margin: 10px 0;
		}

		.user-reminders {
			clear: both;
		}

		.user-reminder {
			min-height: 40px;
			line-height: 20px;
			padding: 10px;
			position: relative;

			.mark-as-done, .delete, .mark-as-undone {
				color: green;

				@include default-border-radius;

				display: none;
				position: absolute;
				right: 80px;
				bottom: 4px;

				&:hover {
					background-color: rgba(0, 0, 0, 0.1);
				}

				i {
					padding: 4px 5px;
				}
			}
			.delete {
				right: 4px;
				color: red;
			}
			.mark-as-undone {
				color: #f9a732;
			}			

			.btn {
				margin-right: 10px;
			}

			.left-container {
				margin-left: 0;
				margin-right: 20px;
				min-height: 1px;
			}

			.sender {
				display: none; /* togliere per vedere foto */
				float: left;
				position: relative;

				.user-thumbnail {
					@include border-radius(50%);
					@include box-shadow(0 0 0 2px #5594E0);

					display: block;
					height: 30px;
					margin: 5px 10px 0 0;
					overflow: hidden;

					img {
						width: 30px;
					}
				}
			}

			.read {
				float: right;
				font-size: 11px;
			}

			.content {
				/* margin-left: 40px; Togliere per riabilitare stili per foto a sinistra */
			}

			.body-container {
				color: #444;
				overflow: hidden;
				text-overflow: ellipsis;

				.title {
					color: #222;
				}
			}

			.timestamp {
				color: #999;
				font-size: 11px;
			}
			
			.user-reminder-subject {
				font-weight: bold;
				text-decoration: underline;
				
				&:hover, &.hover {
					text-decoration: none;
				}
			}
			
			.user-reminder-description {
				font-style: italic;
				
				&:hover, &.hover {
					text-decoration: none;
				}			
			}				
		}
	}

	.mark-all-as-done {
		float: right;
	}
}

/* ---------- Dockbar reminders ---------- */

.aui {
	.dockbar .nav li.dropdown.dockbar-user-reminders .dropdown-menu {
		left: auto;
		max-height: none;
		padding: 10px;
		right: 0;
		background-color: green;

		&.pull-right:after {
			right: 20px;
		}
	}
}

#reminder-title {
	color: white;
	font-weight: bold;
}

.dockbar-user-reminders {
	.dropdown-toggle .user-reminders-count {
		background-color: #0066B3;
		border: 1px solid #0066B3;

		@include default-border-radius;

		display: block;
		line-height: 1.25em;
		margin: 4px 0;
		padding: 2px 6px;
		position: relative;

		&.alert {
			background-color: #0cc523; /* #FAA732;*/
			border: 1px solid #0cc523; /* #FAA732; */
			color: #fff; /* #FFF; */

			@include experimental(animation, shakeReminderCount 0.8s linear infinite);
			@include experimental(animation-iteration-count, 5);
			@include experimental(transform-origin, 50% 50%);
		}
	}

	.dropdown-menu {
		width: 450px;
	}

	.not-marked-as-done, .all-reminders {
		background-color: #FFF;

		@include default-border-radius;
	}

	.all-reminders, .not-marked-as-done {
		margin-bottom: 10px;
	}

	.user-reminders-header {
		border-bottom: 1px solid #2AAAE6;
		min-height: 31px;
		padding: 0 10px;
		text-align: center;

		& > span {
			line-height: 2.25em;
		}

		.title {
			float: left;
		}
		
		.next, .previous {
			cursor: pointer;
		}		
	}
	
	.user-reminders-footer {
		border-top: 1px solid #2AAAE6;
		min-height: 31px;
		padding: 0 10px;

		& > span {
			line-height: 2.25em;
		}

		.title {
			float: left;
		}
	}	
}

/* ---------- Reminders portlet ---------- */

.viewerreminders-portlet {
	.nav {
		margin-bottom: 10px;

		a {
			display: block;
			padding: 5px 10px;

			.title {
				float: left;
			}

			.count {
				float: right;
			}

			&:hover, &.selected {
				@include default-border-radius;
			}

			&:hover {
				text-decoration: none;
			}
		}

		a:hover, a.selected {
			background-color: #0A85E4;
			color: #FFF;
		}
	}

	.all-reminders .user-reminder, .not-marked-as-done .user-reminder {
		background-color: #EDEDED;
		overflow: hidden;

		&.archived {
			background-color: #FFF;

			.title {
				font-weight: normal;
			}
		}

		.title {
			font-weight: bold;
		}

		.timestamp {
			color: #666;
		}
	}
	
	.all-reminders .mark-all-as-done {
		display: none;
	}

	.user-reminders-list-container {
		border: 1px solid #D5D5D5;

		@include box-sizing(border-box);
		@include default-border-radius;
	}

	.user-reminders-list{
		margin: 0;
		padding: 0;

		.pagination {
			@include box-sizing(border-box);

			display: flex;
			margin: 0;
			min-height: 31px;
			width: 100%;

			&:before {
				display: none;
			}

			.next, .page-info, .previous {
				float: none;
			}

			&.top {
				border-bottom: 1px solid #D5D5D5;
			}

			&.bottom {
				border-top: 1px solid #D5D5D5;
			}

			.page-info {
				color: #999;
				flex-grow: 2;
			}
		}

		.mark-all-as-done {
			margin: 10px 20px;
			min-height: 20px;
		}

		.user-reminders {
			clear: both;
			margin-bottom: 40px;
		}

		.message.top {
			border-bottom: 1px solid #D5D5D5;
			margin-bottom: 10px;
		}

		.user-reminder {
			border-top: 1px solid #DDD;
			color: #000;
			margin: 0 20px;

			&:last-child {
				border-bottom: 1px solid #DDD;
			}

			.mark-as-done, .delete, .mark-as-undone {
				float: right;
			}
		}

		.body-container {
			float: left;
		}

		.timestamp {
			float: right;
		}	
		
		.marked {
			background-color: lightgreen;
		}
	}

	/* ---------- Reminder delivery ---------- */

	.manage-reminders {
		overflow: auto;
		padding: 10px;

		.title {
			font-size: 1.5em;
			line-height: 1.2em;
			margin-bottom: 30px;

			.reminder-delivery {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
			}
		}

		.reminder-deliveries {
			caption {
				color: #AAA;
				font-size: 14px;
				margin-bottom: 10px 0;
				text-align: left;
			}
		}

		.table {
			max-width: none;

			tbody {
				border-top: 1px solid #DDD;
			}

			td {
				background-color: transparent;
				border-top-width: 0;
			}
		}
	}
}

/* ---------- Layout ---------- */

.span1, .span2, .span3, .span4, .span5, .span6 {
	.viewerreminders-portlet {
		.user-reminders-sidebar, .user-reminders-list-container {
			margin-left: 0;
			width: 100%;
		}
	}
}

.span8 {
	width: 70%;
}

/* ---------- Internet explorer ---------- */

.ie8 .user-thumbnail img {
	max-width: none;
}

/* ---------- Touch ---------- */

.touch {
	.dockbar-user-reminders, .viewerreminders-portlet {
		.user-reminder {
			&, &.archived {
				&, &:hover, &.hover {
					.mark-as-done, .delete, .mark-as-undone {
						display: none;
					}
				}
			}
		}
	}
}

/* ---------- Responsive ---------- */

@include respond-to(phone) {
	.viewerreminders-portlet, .dockbar-user-reminders {
		.user-reminders-list {
			.user-reminder {
				margin: 0;

				.body-container {
					width: 100%;

					.btn {
						display: inline-block;
						margin-left: 5%;
						margin-right: 0;
						width: 45%;
					}
				}
			}

			.timestamp {
				clear: both;
				float: none;
			}
		}
	}
}

/* --- Custom --- */

.user-reminders-count{
	line-height: 1em !important;
	margin: 4px 0 3px 0 !important;
	padding: 5px 15px !important;
}