/**
 * WPMU Dev Card-List styles
 * (Philipp Stracker for WPMU Dev)
 *
 * @since 1.1.0
 */

#wpwrap .wpmui-list-wrapper,
.wpmui-list-wrapper {

	.wpmui-list {
		margin-left: -16px;

		&:after {
			content: '';
			display: table;
			clear: both;
		}
	}

	.list-card {
		float: left;
		margin: 0 0 16px 16px;
		width: 48%;
		width: -webkit-calc(50% - 16px);
		width: calc(50% - 16px);

		background-color: #fff;
		border: 1px solid #dedede;
		box-sizing: border-box;
		opacity: .8;

		.badge-container {
			overflow: hidden;
			width: 100px;
			height: 100px;
			position: absolute;
			left: 0px;
			top: 0px;
		}

		.badge-active {
			display: none;
		}

		&.active {
			opacity: 1;
			background: #FFF;
			border: 1px solid #BBB;
			box-shadow: 0 1px 3px rgba(0,0,0,0.12);
			z-index: 20;

			.desc,
			.name {
				color: #333;
			}

			.badge-active {
				position: absolute;
				top: 15px;
				left: -35px;
				display: block;

				background-color: #6bbb1a;
				color: #FFF;
				transform: rotate(315deg);
				padding: 3px 40px;

				z-index: 20;
				border: 1px solid #FFF;
			}

			.item-icon {
				color: #3b8b08;
			}
		}

		.item-icon {
			position: absolute;
			top: 20px;
			left: 20px;
			width: 128px;
			height: 128px;
			margin: 0 20px 20px 0;
			font-size: 100px;
			z-index: 16;

			i {
				opacity: 0.8;
				font-size: 100px;
			}
		}

		.desc,
		.name {
			margin-left: 148px;
			margin-right: 120px;
			color: #777;
		}

		.action-links {
			position: absolute;
			top: 20px;
			right: 20px;
			width: 120px;

			text-align: right;

			.space {
				display: block;
				line-height: 10px;
				height: 10px;
				padding: 0;
				margin: 0;
			}
		}

		h4 {
			margin: 0 0 12px;
			font-size: 18px;
			line-height: 1.3;
		}

		@media screen and (min-width: 1600px) {
			width: 30%;
			width: -webkit-calc(33.3333% - 16px);
			width: calc(33.3333% - 16px);
		}
	}

	.list-card-top {
		position: relative;
		padding: 20px 20px 10px;
		height: 135px;
		overflow: hidden;

		.fader {
			position: absolute;
			bottom: 0;
			height: 20px;
			left: 0;
			right: 0;
			z-index: 5;

			background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(90%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%); /* IE10+ */
			background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
		}
	}

	.list-card-bottom {
		clear: both;
		padding: 12px 20px;
		background-color: #fafafa;
		border-top: 1px solid #dedede;
		overflow: hidden;
		height: 45px;
	}

	.details,
	.is-detail {
		display: none;
	}

	.is-no-detail {
		display: inline;
	}

	.details {
		.wpmui-html-text-wrapper,
		.wpmui-input-wrapper,
		.wpmui-select-wrapper,
		.wpmui-radio-wrapper,
		.wpmui-radio-slider-wrapper {
			display: block;
			position: relative;
			padding: 10px;
			margin: 0 0 10px 0;

			background-color: #FFF;
			border: 1px solid #dedede;

			.wpmui-radio-slider {
				position: absolute;
				top: 10px;
				right: 10px;

				&.has-labels {
					position: relative;
					top: 0;
					right: 0;
				}
			}
		}
	}

	.wpmui-list-table.has-details{
		&:before {
			content: '';
			background: #000;
			opacity: .3;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 21;
		}

		.list-card {
			opacity: .7;
		}

		.detail-mode {
			z-index: 25;
			opacity: 1;

			.is-detail {
				display: inline;
			}

			.is-no-detail {
				display: none;
			}

			.list-card-top {
				position: absolute;
				top: 0;
				bottom: 43px;
				height: auto;
				left: 0;
				right: 0;
				overflow: visible;
			}

			.details {
				display: block;
				position: absolute;
				overflow: auto;
				top: 135px;
				left: 0;
				right: 0;
				background: #FCFCFC;
				border-top: 1px solid #dedede;
				padding: 20px;
				bottom: 0;
			}
		}
	}

	.detail-mode {
		position: absolute;
		top: 50px;
		left: 50px;
		right: 50px;
		width: auto;
		height: auto;
		z-index: 20;
		box-shadow: 0 1px 10px rgba(0,0,0,0.3);
		opacity: 1;

		.list-card {
			border: 1px solid #999;
		}

		.list-card-bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}

	.toggle-details {
		cursor: pointer;
	}

	.toggle-link {
		float: right;
		color: #0074a2;

		&:hover {
			color: #2ea2cc;
		}
	}

	.filter-links {
		& > li {
			line-height: 48px;
			height: 48px;

			a {
				padding-top: 0;
				padding-bottom: 0;
			}
		}
	}

	.close-button {
		position: absolute;
		top: -30px;
		right: -30px;
		border-radius: 15px;
		background: #FFF;

		&:after {
			content: "\f335";

			display: inline-block;
			width: 30px;
			height: 30px;
			font-size: 26px;
			line-height: 30px;
			font-family: dashicons;
			text-decoration: inherit;
			font-weight: 400;
			font-style: normal;
			vertical-align: top;
			text-align: center;
			-webkit-transition: color .1s ease-in 0;
			transition: color .1s ease-in 0;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
	}
}