details {
	&.alert,
	&.alert[open] {
		border-radius: 0;
		border-width: 0 0 0 4px;
		padding-left: 45px;
		padding-right: 0;
		position: relative;

		&:before {
			display: inline-block;
			font-family: "Glyphicons Halflings";
			font-size: 24px;
			margin-left: -1.3em;
			margin-top: -3px;
			position: absolute;
			top: 15px;
		}

		summary {
			border-width: 0;
			margin-right: 15px;
			padding-left: 5px;

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

				h2,
				h3,
				h4,
				h5,
				h6 {
					text-decoration: underline;
				}
			}
		}

		> {
			* {
				margin-left: .7em;
			}

			:first-child {
				margin-left: .2em;

				&:before {
					color: #000;
					content: "";
				}
			}
		}

		&.alert-success {
			@extend %label-alert-success-bg-border-left;

			&:before {
				color: $label-alert-success-border-icon-color;
				content: "\e084";
			}
		}

		&.alert-info {
			@extend %label-alert-info-bg-border-left;

			&:before {
				color: $label-alert-info-border-icon-color;
				content: "\e086";
			}
		}

		&.alert-warning {
			@extend %label-alert-warning-bg-border-left;

			&:before {
				color: $label-alert-warning-border-icon-color;
				content: "\e107";
			}
		}

		&.alert-danger {
			@extend %label-alert-danger-bg-border-left;

			&:before {
				color: $label-alert-danger-border-icon-color;
				content: "\e101";
			}
		}
	}
}

.wb-enable {
	&.no-details {
		details {
			&.alert {
				> {
					summary {
						margin-left: 1.2em;

						&:before {
							content: "\25BA\a0";
						}
					}
				}

				&[open] {
					> {
						summary {
							&:before {
								content: "\25BC\a0";
							}
						}
					}
				}
			}
		}

		&[dir="rtl"] {
			details {
				&.alert {
					> {
						summary {
							margin-right: 1.2em;
						}
					}
				}
			}
		}
	}
}