.list {
	padding: 0;
	margin: 0;
	list-style: none;

	&__item {
		padding: 10px 10px 11px 14px;
		margin: 0;
		line-height: 21px;
		background-color: $global-white-color;
		cursor: pointer;
	}

	&__label {
		font-weight: 600;
	}

	// Variations
	&--primary {

		.list {

			&__item {
				border-bottom: 1px solid #ddd;
				border-left: 4px solid #fff;

				@include transition( .15s color ease-in-out, .15s background-color ease-in-out, .15s border-color ease-in-out );

				&:first-of-type {
					border-top: 1px solid #ddd;
				}

				&:last-of-type {
					border-bottom-color: #ddd;
				}

				&:focus {
					outline: none;
				}

				&:focus,
				&:hover {
					color: #0073aa;
					background: #f3f3f5;
					border-left-color: #0073aa;

					.list__label::after {
						color: inherit;
					}
				}
			}

			&__label {
				position: relative;

				&::after {
					position: absolute;
					top: 1px;
					right: 0;
					z-index: 1;
					content: "\f345";
					font: normal 20px/1 'dashicons';
					color: #a0a5aa;
					speak: none;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}
			}
		}
	}
}


@keyframes shake {

	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-3px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(3px, 0, 0);
	}
}

.list--secondary {
	padding: 0 12px;
	margin: 8px 0;

	.list__item {
		position: relative;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 4px;
		background-color: $global-white-color;
		border: 1px solid #e5e5e5;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
		box-shadow: 0 1px 1px rgba(0,0,0,0.04);

		&.draggable:not( .is-inactive ) {

			@include transition( box-shadow $global-transition-duration linear );

			&:focus {
				outline: none;
			}

			&:focus,
			&:hover {
				box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
			}

			&.shake {
				animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
				transform: translate3d(0, 0, 0);
				backface-visibility: hidden;
				perspective: 1000px;
			}
		}

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	.list__label {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.element__badge + .list__label {
		max-width: 170px;
	}
}

.list {

	.element {

		&__wrap {
			display: block;
			overflow: hidden;
		}

		&__description {
			display: block;
			color: #777;
			font-size: 12px;
		}

		&__badge {
			position: absolute;
			right: -1px;
			padding: 1px 6px;
			font-size: 12px;
			font-weight: 400;
			line-height: 18px;
			white-space: nowrap;
			color: #fff;
			background-color: #777;
		}

		.list__label {
			padding-bottom: 5px;
			color: inherit;
		}

		&::before {
			content: "\f109";
			padding-right: 0.75em;
			float: left;
			font: normal 20px/1 dashicons;
			color: inherit;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		&.is-inactive {
			color: #aaa;
			cursor: default;

			.element__badge {
				background-color: #aaa;
			}

			.element__description {
				color: #aaa;
			}

			@include user-select( none );
		}

		&--box::before {
			content: "\f175";
		}

		&--button::before {
			content: "\f504";
		}

		&--card::before {
			content: "\f336";
		}

		&--carousel::before {
			content: "\f181";
		}

		&--form_cf7::before {
			content: "\f466";
		}

		&--gallery::before {
			content: "\f233";
		}

		&--grid::before {
			content: "\f180";
		}

		&--hero::before {
			content: "\f116";
		}

		&--list::before {
			content: "\f163";
		}

		&--map::before {
			content: "\f230";
		}

		&--panel::before {
			content: "\f135";
		}

		&--section::before {
			content: "\f535";
		}

		&--tabs::before {
			content: "\f318";
		}

		&--content::before {
			content: "\f478";
		}

		&--toggles::before {
			content: "\f164";
		}

		&--user::before {
			content: "\f110";
		}

		&--widgets::before {
			content: "\f120";
		}

		&--jetpack_portfolio::before {
			content: "\f161";
		}

		&--jetpack_testimonials::before {
			content: "\f122";
		}
	}

	&.is-simplified {

		.element {

			.list__label {
				padding-bottom: 0;
			}

			.element__description {
				display: none;
			}
		}
	}

	.template {

		.list__label {
			float: left;
			max-width: calc( 100% - 80px );
		}

		.template__controls {
			float: right;
			height: 21px;
		}

		@include clearfix;
	}

	.history {

		.history__wrap {
			@include clearfix;
		}

		.list__label,
		.history__time {
			float: left;
		}

		.list__label {
			padding-left: 8px;
			max-width: calc( 100% - 85px );
		}

		&.is-active {

			.list__label {

				&::after {
					position: absolute;
					right: 8px;
					content: "\f147";
					font-family: dashicons;
					font-size: 20px;
					font-weight: 400;
					font-style: normal;
					vertical-align: top;
				}
			}
		}
	}

	.button--icon {
		margin-left: 2px;
		width: 18px;

		&::after {
			font-family: "dashicons";
			font-size: 18px;
			font-weight: normal;
			-webkit-font-smoothing: antialiased;
		}

		&.button--delete {
			color: #a00;

			&:focus,
			&:hover {
				color: red;
			}

			&::after {
				content: "\f335";
			}
		}

		&.button--download {

			&::after {
				content: "\f316";
			}
		}

		&.button--preview {

			&::after {
				content: "\f177";
			}
		}

		&.button--download,
		&.button--preview {
			color: #555;

			&:focus,
			&:hover {
				color: #0073aa;
			}
		}
	}
}