@import '../../variables.less';
@import '../../mixins.less';

/**********************
real-fields/alerts.less
*************************/

.ecf-output-fields-wrapper {

	&.ecf-xs {
		.ecf-info {
			&.ecf-with-button {
				padding-right: 20px;
			}
			.ecf-buttons-wrapper {
				position: relative;
				top: 0;
				right: auto;
				margin-top: 15px;
			}
		}
	}

	.ecf-warning, .ecf-info {
		.roundedcorners(7px);
		background: @warning_1;
		border: 1px solid @warning_1;
		padding: 20px;
		margin-top: 15px;
		position: relative;
		hr {
			border-color: @warning_3;
			margin: 15px 0;
		}
		p {
			font-size: 14px;
			font-weight: 400;
			margin: 0 0 10px;
		}
		> * {
			color: fade(@black, 70%);
		}
		.ecf-buttons-wrapper {
			position: absolute;
			right: 15px;
			top: 15px;
		}
		button, a {
			&:not(.outline) {
				color: @white;				
			}
		}
		&.ecf-with-button {
			padding-right: 200px;
		}
		code {
			white-space: normal;
		}
		&.ecf-with-arrow {
			&:before {
				content: '';
				position: absolute;
				left: 20px;
				bottom: 100%;
				border-width: 0 8px 8px 8px;
				border-color: transparent transparent @warning_1 transparent;
				border-style: solid;
			}
		}
	}

	.ecf-info {
		background: @info_1;
		border: 1px solid @info_1;
		hr {
			border-color: @info_3;
		}
		&.ecf-with-arrow {
			&:before {
				border-color: transparent transparent @info_1 transparent;
			}
		}
	}

}