.store-notice-wrapper {
	padding: 20px;
	border-radius: 10px;
	background-color: color-mix(
	in srgb,
	var(--e-global-color-primary) 30%,
	white 70%
	);
}

.store-notice-icon {
	display: inline-block;
	margin-right: 20px;
}

.store-notice-icon svg {
	fill: var(--e-global-color-primary);
}

.store-notice-close svg {
	cursor: pointer;
	fill: var(--e-global-color-primary);
}

.store-closed-notice {
	padding-top: 10px;
	padding-bottom: 10px;
}

.store-closed-notice {
	position: relative;
	overflow: hidden; /* Ensure no overflow */
}

.store-closed-notice::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--e-global-color-primary);
	opacity: 0.2; /* Set the desired opacity */
	z-index: 1; /* Place behind other content */
}

.store-closed-notice > * {
	position: relative; /* Ensure content is above the pseudo-element */
	z-index: 2; /* Place above the background */
}

.store-closed-notice-svg path {
	fill: var(--e-global-color-primary); /* Change to desired color */
}

.store-notice-icon,
.store-notice-close {
	flex: 0 0 auto; /* Prevents stretching; the elements will maintain their intrinsic size */
}

.store-notice-text {
	flex: 1 1 auto; /* Allows stretching to take up the remaining space */
	margin: 0 10px; /* Adds some space between the text and the icons */
	overflow: hidden; /* Ensures text does not overflow */
	text-overflow: ellipsis; /* Adds ellipsis for overflowing text */
	white-space: nowrap; /* Prevents wrapping */
}

.store-notice-text h2 {
	margin-top: 0;
}