.cuckoo-errors {
	margin-bottom: 30px;

	.show-all-errors {
		span { 
			font-size: 10px;
			vertical-align: middle; 
		}

		.btn { margin-left: 10px; }
	}

	.troubleshoot {
		background-color: #F2DEE4;
		border: 1px solid #ebccd1;
		padding: 15px 0;
		border-radius: 4px;
		margin-bottom: 10px;

		p {
			font-weight: 500;
			color: #a94442;
			padding: 0 15px;
		}

		ul {
			list-style: none;
			margin: 5px 0 0 0;
			padding: 0;

			li {
				display: flex;
				align-items: flex-start;
				margin-bottom: 5px;
				padding: 0 15px;

				p {

					font-weight: 400;
					color: inherit;
					padding: 0;

					a {
						display: inline;
						margin: 0 2px;
					}
				}

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

				&:before {
					content: "\2192";
					margin-right: 15px;
				}
			}
		}

		// cyborg
		@include cuckoo-theme('cyborg') {

			@extend %cyborg-heading;

			& > p {
				color: #ff0500;
			}

		}

		// night
		@include cuckoo-theme('night') {

			background-color: #252525;
			border-color: #151515;

		}

	}

}

.errors {

	list-style: none;
	padding: 0;
	margin-bottom: 15px;

	li {

		margin: 10px 0;
		padding: 15px;
		background-color: #222;
		color: #ccc;
		border-radius: 3px;
		border-bottom: 1px solid #fff;

		&:first-child {margin-top: 0}

		&.expanded {
			& > p {
				height: auto;
			}

			.fa:before {
				content: "\f066";
			}
		}

	}

	p {
		display: block;
	    unicode-bidi: embed;
	    font-family: monospace;
	    white-space: pre;
	    overflow: hidden;
	    height: 20px;
	}

	.expand-error {
		color: #777;
		font-size: 12px;
		text-decoration: none;

		.fa {
			vertical-align: middle;
			margin-right: 10px;

			&:hover + span {
				display: inline;
			}
		}

		span {
			display: none;
			font-size: 10px;
		}
	}

}