@import "../../main/variables";

.woocommerce-NoticeGroup,
.woocommerce-notices-wrapper {

	> ul {
		flex-direction: column;
		align-items: flex-start;
	}
}

.woocommerce-info,
.woocommerce-error,
.woocommerce-message {
	display: flex;
	align-items: start;
	flex-direction: column;
	text-align: start;
	padding: 15px 15px 15px 45px;
	--btnfs: $text-sm;
	--primarybtnpadding: 10px 15px;
	--primarybtnborderwidth: 3px;
	--primarybtncolor: #fff;
	--primarybtnhovercolor: #fff;
	--primarybtnhoverbg: transparent;
	--primarybtnbg: transparent;

	> a {

		@extend %nv-button-primary-no-colors;
	}

	a,
	.button {
		width: 100%;
		margin-top: $spacing-sm;
		white-space: normal;
		margin-left: auto;
		text-align: center;
	}
}

$notices: (
	"message": $success,
	"error": $error,
	"info": var(--nv-primary-accent),
);

@each $noticeName, $color in $notices {
	.woocommerce .woocommerce-#{$noticeName},
	.woocommerce-page .woocommerce-#{$noticeName} {
		border-radius: 3px;
		background: $color;
		border: 0;
		color: #fff;

		a,
		&::before {
			color: inherit;
		}
	}
}

$blockNotices: (
	"success": $success,
	"error": $error,
	"info": var(--nv-primary-accent),
);

.neve-main .wc-block-components-notice-banner {
	--btnfs: $text-sm;
	--primarybtnpadding: 10px 15px;
	--primarybtnborderwidth: 3px;
	--primarybtncolor: #fff;
	--primarybtnhovercolor: #fff;
	--primarybtnhoverbg: transparent;
	--primarybtnbg: transparent;

	.wc-block-components-notice-banner__content {

		&:has(.wc-forward, .showcoupon) {
			display: inline-flex;
			flex-basis: 100%;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
		}

		&:has(.wc-forward) {
			flex-direction: row-reverse;
		}

		&:has(.showcoupon) {
			flex-direction: row;
		}
	}
}

@each $noticeName, $color in $blockNotices {
	.neve-main .wc-block-components-notice-banner.is-#{$noticeName} {
		border-radius: 3px;
		background-color: $color;
		border: 0;
		color: #fff;
		font-size: inherit;
		line-height: inherit;
		align-items: center;

		svg {
			background-color: #fff;
			fill: $color;
		}

		a:is(.wc-forward, .showcoupon) {
			background: var(--primarybtnbg) !important;
			border: var(--primarybtnborderwidth, 0) solid currentColor !important;
			border-radius: var(--primarybtnborderradius, 3px);
			color: var(--primarybtncolor) !important;
			padding: var(--primarybtnpadding, 13px 15px) !important;
			text-decoration: none !important;
			opacity: 1;
			float: none;

			&:hover {
				background: var(--primarybtnhoverbg) !important;
				color: var(--primarybtnhovercolor) !important;
				border-color: var(--primarybtnhovercolor) !important;
				opacity: 0.9;
			}
		}

	}
}

.woocommerce .woocommerce-error {

	li {
		width: 100%;
		margin: 0;
	}
}

@mixin notices--tablet-sm() {

	.woocommerce-info,
	.woocommerce-error,
	.woocommerce-message {
		text-align: left;
		padding-left: $spacing-aired;
		align-items: center;

		a,
		.button {
			order: -1;
			margin-left: auto !important;
			margin-top: 0;
			width: auto;
		}

		&::before {
			display: flex;
			top: 0;
			height: 100%;
			color: #fff;
		}
	}

	.woocommerce-info,
	.woocommerce-message {
		flex-direction: row-reverse;
		justify-content: flex-end;

		&::before {
			align-items: center;
		}
	}

	.woocommerce-error {
		flex-direction: column-reverse;

		&::before {
			align-items: start;
			padding-top: 15px;
		}
	}
}
