@use "../../../../1-helpers/functions";

.woocommerce-notices-wrapper {
	margin-inline: auto;
	width: var(--theme-container-width);
	max-width: var(--theme-block-max-width);
}

:is(
	.woocommerce-info, 
	.woocommerce-error, 
	.woocommerce-message, 
	.woocommerce-thankyou-order-received
) {
	display: flex;
	position: relative;
	font-size: 15px;
	color: var(--theme-text-color);
	padding: 10px;
	clear: both;
	border-radius: 5px;
	margin-bottom: 2rem;
	background: var(--background-color);

	--theme-link-initial-color: var(--theme-text-color);


	@include functions.media-breakpoint-down (xs) {
		align-items: flex-start;
		flex-direction: column;
		font-size: 14px;
		padding: 15px 15px 15px 46px;
	}

	@include functions.media-breakpoint-up (sm) {
		align-items: center;
		padding-inline-start: 55px;
		min-height: 60px;
	}

	li {
		width: 100%;

		@include functions.media-breakpoint-up (sm) {
			margin-bottom: 0.3em;
		}
	}

	:is(
		.button, 
		.showlogin, 
		.restore-item
	) {
		order: 2;
		--theme-button-font-size: 14px;
		--theme-button-min-height: 40px;
		--theme-button-padding: 5px 15px;

		@include functions.media-breakpoint-down (xs) {
			margin-top: 10px !important;
		}

		@include functions.media-breakpoint-up (sm) {
			margin-inline-start: auto !important;
		}
	}

	&:before {
		position: absolute;
		width: var(--theme-icon-size, 18px);
		height: var(--theme-icon-size, 18px);
		font-family: 'woo';
		content: '\e901';
		font-size: var(--theme-icon-size, 18px);
		line-height: var(--theme-icon-size, 18px);
		opacity: 0.9;

		@include functions.media-breakpoint-down (xs) {
			top: 19px;
			inset-inline-start: 18px;
			--theme-icon-size: 15px;
		}

		@include functions.media-breakpoint-up (sm) {
			top: 21px;
			inset-inline-start: 20px;	
		}
	}

	&:after {
		display: table;
		content: '';
		clear: both;
	}
}


.woocommerce ul.woocommerce-error {
	flex-direction: column;
	justify-content: center;
	margin-bottom: 2rem;

	li {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.3em;
	}
}