@import "mixins/mixins";
@import "common/var";

@include b(alert) {
	width: 100%;
	padding: $--alert-padding;
	margin: 0;
	box-sizing: border-box;
	border-radius: $--alert-border-radius;
	position: relative;
	background-color: $--color-white;
	overflow: hidden;
	opacity: 1;
	display: flex;
	align-items: center;
	transition: opacity .2s;

	@include when(center) {
		justify-content: center;
	}

	@include m(success) {
		background-color: $--alert-success-color;
		color: $--color-success;
		border: $--border-success-color 1px solid;

		.kc-alert__description {
			color: $--color-success;
		}
	}

	@include m(info) {
		background-color: $--alert-info-color;
		color: $--color-info;
		border: $--border-info-color 1px solid;
		.kc-alert__description {
			color: $--color-info;
		}
	}

	@include m(warning) {
		background-color: $--alert-warning-color;
		color: $--color-warning;
		border: $--border-warning-color 1px solid;
		.kc-alert__description {
			color: $--color-warning;
		}
	}

	@include m(error) {
		background-color: $--alert-danger-color;
		color: $--color-danger;
		border: $--border-error-color 1px solid;
		.kc-alert__description {
			color: $--color-danger;
		}
	}

	@include e(content) {
		display: table-cell;
		padding: 0 8px;
	}

	@include e(icon) {
		font-size: $--alert-icon-size;
		width: $--alert-icon-size;
		@include when(big) {
			font-size: $--alert-icon-large-size;
			width: $--alert-icon-large-size;
		}
	}

	@include e(title) {
		font-size: 14px;
		line-height: 18px;
		@include when(bold) {
			font-weight: bold;
		}
	}

	& .kc-alert__description {
		font-size: $--alert-description-font-size;
		margin: 5px 0 0 0;
		line-height: 20px;
	}

	@include e(closebtn) {
		font-size: $--alert-close-font-size;
		opacity: 1;
		position: absolute;
		top: 12px;
		right: 15px;
		cursor: pointer;
		@include when(customed) {
			font-style: normal;
			font-size: $--alert-close-customed-font-size;
			top: 9px;
		}
	}
}

.kc-alert-fade-enter,
.kc-alert-fade-leave-active {
	opacity: 0;
}