// General mode

.mt-element-list {

	.list-default{

		&.mt-list-head{
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			padding:15px;

			.list-title{
				margin: 0 0 0.7em 0;
				font-size: 18px;
			}

			.list-date{
				font-size: 12px;
			}

			.list-pending{
				margin-bottom: 10px;
			}

			.list-count{
				display: inline-block;
				padding:3px 7px;

				&.last{
					margin-bottom: 0;
				}
			}

			.list-label{
				display: inline-block;
				font-size: 12px;
			}			
		}

		&.mt-list-container{
			border-left:1px solid;
			border-right:1px solid;
			border-bottom:1px solid;
			border-color: $general-panel-border-color;
			padding:15px;

			.mt-list-title{
				padding-bottom:15px;
				font-size:14px;
				font-weight:700;
			}

			ul{
				margin-bottom: 0;
				padding:0;

				>.mt-list-item{
					list-style: none;
					border-bottom: 1px solid;
					border-color: $general-panel-border-color;
					padding:25px 0;
					min-height:45px;

					&:first-child{
						padding-top:0;
					}

					&:last-child{
						padding-bottom:0;
						border:none;
					}

					>.list-icon-container{
						border:1px solid;
						border-color: $general-panel-border-color;
						border-radius: 50% !important;
						padding:0.9em;
						float:left;
						width:45px;
						height:45px;

						>a{
							color:#34495e;

							&:hover{
								color:#26C281 ; 
								text-decoration: none;
							}
						}


						&.done{
							border-color: #26C281;

							>a{
								color:#26C281;

								&:hover{
									color:#26C281 ; 
									text-decoration: none;
								}
						}

						}
					}

					>.list-item-content{
						padding:0 75px 0 60px; 

						>h3{
							margin-top:0;
							margin-bottom:5px;
							font-size:16px;

							>a{
								color:#34495e;

								&:hover{
									color:#26C281 ; 
									text-decoration: none;
								}
							}
						}

						>p {
							margin: 0;
						}

					}

					>.list-datetime{
						text-align: right;
						float: right;
						width: 60px;
					}

				}
			}
		}

		&.ext-1{

			&.mt-list-container{
				padding:15px 0 0 0;

				.mt-list-title{
					padding:0 15px 15px 15px;
				}

				ul{

					>.mt-list-item{
						padding:15px;
						border-left:3px solid;
						border-color: #2F353B;
						border-bottom-color: $general-panel-border-color;

						&:hover{
							background-color: #e5e5e5;
						}

						&.done{
							border-color: #26C281;
							border-bottom-color: $general-panel-border-color;

							&:hover{
								background-color: lighten(#26C281, 30%);		
							}
						}

						>.list-icon-container{
							border:none;
						}

					}
				}
			}
		}

		&.group{

			.list-toggle-container{
				&:hover,
				&:focus,
				&:active{
					text-decoration: none;
				}


				.list-toggle{
					padding:15px;
					background-color: #2F353B;
					font-weight: 700;
					color: #fff;
					text-decoration: none;

					&.done{
						background-color: #26C281;			
					}

				}
			}
		}
	}

	.list-simple{

		&.mt-list-head{
			padding:15px;

			.list-title{
				margin: 0 ;
				padding-right:85px;
			}

			.list-date{
				font-size: 12px;
				opacity: 0.8;
				float:right;
				width: 75px;
			}
			
		}

		&.mt-list-container{
			border-left:1px solid;
			border-right:1px solid;
			border-bottom:1px solid;
			border-color: $general-panel-border-color;
			padding:15px;

			ul{
				margin-bottom: 0;
				padding:0;

				>.mt-list-item{
					list-style: none;
					border-bottom: 1px solid;
					border-color: $general-panel-border-color;
					padding:15px 0;

					&:first-child{
						padding-top:0;
					}

					&:last-child{
						padding-bottom:0;
						border:none;
					}

					>.list-icon-container{
						font-size:14px;
						float:left;

						>a{
							color:#34495e;

							&:hover{
								color:#26C281 ; 
								text-decoration: none;
							}
						}

						&.done{
							color: #26C281;

							>a{
								color:#26C281;

								&:hover{
									color:#26C281 ; 
									text-decoration: none;
								}
							}
						}
					}

					>.list-item-content{
						padding:0 75px 0 60px; 

						>h3{
							margin:0;
							font-size:18px;

							>a{
								color:#34495e;

								&:hover{
									color:#26C281 ; 
									text-decoration: none;
								}
							}
						}
					}

					>.list-datetime{
						text-align: right;
						float: right;
						width: 60px;
					}

				}
			}
		}

		&.mt-list-head{
			padding:15px;

			.list-title{
				margin: 0 ;
				padding-right:85px;
			}

			.list-date{
				font-size: 12px;
				opacity: 0.8;
				float:right;
				width: 75px;
			}
			
		}

		&.ext-1{

			&.mt-list-container{
				padding:0;

				ul{

					>.mt-list-item{
						padding:15px;
						border-left:3px solid;
						border-color: #34495e;
						border-bottom-color: $general-panel-border-color;

						&:hover{
							background-color: #e5e5e5;
						}

						&.done{
							border-color: #26C281;
							border-bottom-color: $general-panel-border-color;

							&:hover{
								background-color: lighten(#26C281, 30%);		
							}
						}
					}
				}
			}
		}

		&.group{

			.list-toggle-container{
				&:hover,
				&:focus,
				&:active{
					text-decoration: none;
				}


				.list-toggle{
					padding:15px;
					background-color: #34495e;
					font-weight: 700;
					color: #fff;
					text-decoration: none;

					&.done{
						background-color: #26C281;			
					}

				}
			}
		}
	}

	.list-news{

		&.mt-list-head{
			padding:15px;
			text-align: center;

			.list-title{
				margin: 0 ;
			}

			.badge{
				margin-top:5px;
			}
			
		}

		&.mt-list-container{
			border-left:1px solid;
			border-right:1px solid;
			border-bottom:1px solid;
			border-color: $general-panel-border-color;
			padding:15px 0;

			ul{
				margin-bottom: 0;
				padding:0;

				>.mt-list-item{
					list-style: none;
					border-bottom: 1px solid;
					border-color: $general-panel-border-color;
					padding:15px;
					position: relative;

					&:first-child{
						padding-top:0;
					}

					&:last-child{
						padding-bottom:0;
						border:none;
					}

					>.list-icon-container{
						font-size:20px;
						position: absolute;
						right:5px;
						top:50%;
						margin-top:-10px;

						a{
							color:#2f353b;

							&:hover{
								color:#32c5d2 ; 
							}
						}
					}

					>.list-item-content{
						padding:0 25px 0 0; 

						>h3{
							margin:0;
							font-size:18px;
							margin-bottom: 10px;

							>a{
								color:#34495e;

								&:hover{
									color:#32c5d2 ; 
									text-decoration: none;
								}
							}
						}
					}

					>.list-datetime{
						margin-bottom:10px;
					}

				}
			}
		}

		&.ext-1{

			&.mt-list-head{
				position: relative;
				text-align: left;

				.list-count{
					position: absolute;
				    right: 0;
				    top: 0;
				    height: 100%;
				    padding: 19px;
				}
			}
			

			.list-thumb{
				width:80px;
				height:80px;
				overflow: hidden;
				float:left;

				img{
					width:100%;
				}
			}

			&.mt-list-container{
				padding: 0;

				ul{
					>.mt-list-item{
						padding:15px;

						>.list-datetime{
							padding-left:90px;
						}

						>.list-item-content{
							padding-left:90px;
						}

						&:hover{
							background-color: #e5e5e5;
						}

						&:last-child{
							padding-bottom:15px;
						}
					}
				}
			}
		}

		&.ext-2{

			&.mt-list-head{
				position: relative;
				text-align: left;

				.list-count{
					position: absolute;
				    right: 0;
				    top: 0;
				    height: 100%;
				    padding: 19px;
				}
			}
			

			.list-thumb{
				width:80px;
				height:80px;
				overflow: hidden;
				float:left;

				img{
					width:100%;
				}
			}

			&.mt-list-container{
				padding: 0;

				ul{
					>.mt-list-item{
						padding:15px;

						>.list-datetime{
							padding-left:90px;
						}

						>.list-item-content{
							padding-left:90px;

							> h3{
								font-size: 16px;

								>a{

									&:hover{
										color:#F2784B ; 
									}
								}
							}
						}

						&:hover{
							background-color: #e5e5e5;
						}

						&:last-child{
							padding-bottom:15px;
						}
					}
				}
			}
		}
	}

	.list-todo{

		&.mt-list-head{
			padding:15px;
			position: relative;

			.list-title{
				margin: 0;
			}

			.list-head-count{
				margin-top: 5px;

				>.list-head-count-item{
					display:inline-block;
					margin-right: 15px;
				}
			}

			.list-count{
				position: absolute;
				top:0;
				right:0;
				padding:29px;
				font-size:16px;
			}

			a{
				color:#fff;

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

		&.mt-list-container{
			border-left:1px solid;
			border-right:1px solid;
			border-bottom:1px solid;
			border-color: $general-panel-border-color;
			position: relative;

			.list-todo-line{
				position: absolute;
				z-index: 1;
				height:100%;
				width:1px;
				top:0;
				left:25px;
				border-left:1px solid;
				border-color:$general-panel-border-color;
			}

			ul{
				margin-bottom: 0;
				padding:0;
				position: relative;
				z-index: 5;

				>.mt-list-item{
					list-style: none;
					border-bottom: 1px solid;
					border-bottom-style: dashed;
					border-color:$general-panel-border-color;
					padding:15px;
					position: relative;

					&:last-child{
						border:none;
					}

					>.list-todo-icon{
						display: inline-block;
    					margin-top: 0.7em;
    					padding:0.7em 0;
    					vertical-align: top;
					}

					>.list-todo-item{
						margin-left: 15px;
						display: inline-block;
						vertical-align: top;
						width: 90%;
						position: relative;

						&:after {
							right: 100%;
							top: 50%;
							border: solid transparent;
							content: " ";
							height: 0;
							width: 0;
							position: absolute;
							pointer-events: none;
							border-color: rgba(47, 53, 59, 0);
							border-right-color: #2f353b;
							border-width: 8px;
							top: 18px;
						}						

					    >.list-toggle-container{

					    	&:hover,
					    	&:focus,
					    	&:active{
					    		text-decoration: none;
					    	}

							.list-toggle{
								padding: 15px;

								>.list-toggle-title{
									display: inline-block;
								}
							}
						}

						.task-list{
							border:1px solid;
							border-color: $general-panel-border-color;
							padding:0;
							margin:0;
							position: relative;
							border-top:none;
							border-bottom: none;

							.task-list-item{
								list-style: none;
								padding:15px;
								border-bottom:1px solid;
								border-color: $general-panel-border-color;

								a {
									color:#2f353b;

									&:hover{
										text-decoration: none;
										color: #e43a45;
									}
								}								

								&:last-child{
									border-bottom: none;
								}

								>.task-icon{
									float:left;
								}

								>.task-content{
									padding:0 45px 0 35px;

									> h4{
										margin-top: 0;
										font-size:14px;
									}

									>p{
										font-size: 13px;
										margin: 0;
									}
								}

								>.task-status{
									float:right;

									a{
										color:#e5e5e5;
									}

									.done:hover{
										color:#26C281;
									}

									.pending:hover{
										color: #e43a45;
									}
								}

								&.done{

									>.task-status{
										.done{ color: #26C281; }
									}
								}

							}

							.task-footer{
								padding:15px;
								text-align: center;

								a{
									color:#2f353b;

									&:hover{
										text-decoration: none;
									}

									&.task-trash:hover{
										color:#e43a45;
									}

									&.task-add:hover{
										color:#26C281;
									}
								}
							}
						}
					}

					>.list-icon-container{
						font-size:20px;
						position: absolute;
						right:5px;
						top:50%;
						margin-top:-10px;

						a{
							color:#2f353b;

							&:hover{
								color:#32c5d2 ; 
							}
						}
					}

					>.list-item-content{
						padding:0 25px 0 0; 

						>h3{
							margin:0;
							font-size:18px;
							margin-bottom: 10px;

							>a{
								color:#34495e;

								&:hover{
									color:#32c5d2 ; 
									text-decoration: none;
								}
							}
						}
					}

					>.list-datetime{
						margin-bottom:10px;
					}

				}
			}
		}
		
	}
}

@each $name, $colors in $component-colors {
	.mt-element-list {

		.list-default{

			&.mt-list-head.#{$name}{
				background-color: map-get($colors, base);
				color: map-get($colors, font);

				.badge{
					background-color: lighten(map-get($colors, base),10%);
					color: map-get($colors, font);

				}

				&.ext-1{
					.badge{
						background-color: darken(map-get($colors, base),10%);
					}
				}

				.list-label{
					color: lighten(map-get($colors, base),50%);
				}

				.list-date{
					color: lighten(map-get($colors, base),50%);
				}
			}

		}

		.list-todo {

			&.mt-list-head.#{$name} {
				background-color: map-get($colors, base);
				color: map-get($colors, font);
			}

			.list-count.#{$name} {
				background-color: map-get($colors, base);
				color: map-get($colors, font);

				&:hover {
					background-color: darken(map-get($colors, base), 5%);
				}
			}

			.list-todo-line.#{$name}{
				border-color:map-get($colors, base);
			}			

			.list-todo-item.#{$name} {

				&:after {
					border-right-color:map-get($colors, base) !important;
				}

				.list-toggle {
					background: map-get($colors, base);
					color: map-get($colors, font) !important;

					>.badge{
						color: map-get($colors, base);
						background: map-get($colors, font);
					}
				}
			}
		}
	}
}

@each $name, $colors in $component-colors {
	.mt-element-list .list-todo-item.#{$name} {
  		&:after {
   			border-right-color:map-get($colors, base)
  		}

  		.list-toggle {
   			background: map-get($colors, base);
  		}
 	}
}