@import url(~antd/lib/notification/style/index-pure.less);
@import '../../style/themes/index.less';
@import '../../style/mixins/index.less';

@notification-width: 348px;

.@{notification-prefix-cls} {
	&-notice {
		position: relative;
		padding: @notification-padding-vertical+ @ink-bar-height 44px @notification-padding-vertical*2
			@notification-padding-horizontal;
		box-shadow: @shadow-2;
		border-radius: @border-radius-container;

		&-message {
			font-weight: 500;
			margin-bottom: @margin-sm;
			line-height: 28px;
		}

		&-with-icon &-message {
			margin-bottom: @margin-sm;
		}

		&-description,
		&-with-icon &-description {
			.typography-caption();
			color: @cloud-gray-70;
		}

		&-with-icon &-message,
		&-with-icon &-description {
			margin-left: (@notification-icon-size + @notification-icon-margin-right);
		}

		&-icon {
			margin-left: 0;
			font-size: @notification-icon-size;
			line-height: 28px;
			margin-top: 5px;
		}

		// Status
		&-success,
		&-info,
		&-warning,
		&-error,
		&-loading {
			&::before {
				content: '';
				position: absolute;
				display: block;
				height: @ink-bar-height;
				top: 0;
				left: 0;
				right: 0;
			}
		}

		&-success::before {
			// background-image: linear-gradient(90deg, @success-color-hover, @success-color);
			background: @success-color;
		}

		&-info::before {
			// background-image: linear-gradient(90deg, #1752e4, @blue-base);
			background: @blue-base;
		}

		&-loading::before {
			// background-image: linear-gradient(90deg, #1752e4, @blue-base);
			background: @blue-base;
		}

		&-warning::before {
			// background-image: linear-gradient(90deg, @warning-color-hover, @warning-color);
			background: @warning-color;
		}
		&-error::before {
			// background-image: linear-gradient(90deg, @danger-color-hover, @red-base);
			background: @danger-color;
		}

		&-with-background&-success {
			background-color: @success-color-light!important;
		}

		&-with-background&-info {
			background-color: @info-color-light!important;
		}

		&-with-background&-loading {
			background-color: @info-color-light!important;
		}

		&-with-background&-warning {
			background-color: @warning-color-light!important;
		}

		&-with-background&-error {
			background-color: @danger-color-light!important;
		}
	}

	&-notice-close {
		color: @text-color;
		right: 12px;
		&:hover {
			color: @heading-color;
		}
	}

	&-close-icon {
		font-size: @font-size-lg;
		top: 12px;
		right: 12px;
	}

	&-glassmorphism &-notice {
		.glassmorphism-dropdown();
	}
}