@import '../../style/mixin';

.h-message {
	@include position(absolute, 100, top, 8%, left, 0);
	width: 100%;

	div {
		width: fit-content;
		margin: 10px auto;
		padding: 8px 15px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 4px 13px rgba(0,0,0,0.15);

		i {
			margin-right: 10px;
			font-size: 20px;
			vertical-align: -1px;

			&.icon-check-circle {
				color: green;
			}

			&.icon-info-circle {
				color: #1890ff;
			}

			&.icon-close-circle {
				color: crimson;
			}

			&.icon-warning-circle {
				color: orange;
			}

			&.icon-loading {
				display: inline-flex;
				color: #1890ff;
				font-size: 18px;
				-webkit-animation:loadingAnimate 1s infinite linear;
				animation: loadingAnimate 1s infinite linear;
			}
		}
	}
}

@keyframes loadingAnimate {
	to{ transform: rotate(360deg) }
}