.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
position: relative; display: flow-root;
margin: 0 0 12px; padding: 12px 16px 12px 48px;
border: 1px solid var(--base, #e4e4e8);
border-left: 1px solid var(--base, #e4e4e8);
border-radius: var(--vv-radius, 6px);
background: var(--base-3, #fff);
box-shadow: var(--vv-shadow-card, 0 4px 14px rgba(47, 120, 255, 0.14));
font-size: 0.9375rem;
line-height: 1.5;
color: var(--contrast, #353535);
list-style: none;
} .woocommerce-info::after,
.woocommerce-message::after,
.woocommerce-error::after {
content: none;
} .woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.wc-block-components-notice-banner::before {
content: ""; display: inline-block; position: absolute;
top: 13px;
left: 16px;
width: 20px;
height: 20px;
background-color: var(--vv-notice-colour, var(--contrast-2, #6d6d6d));
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 20px 20px;
mask-size: 20px 20px;
} .woocommerce-message::before,
.wc-block-components-notice-banner.is-success::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm-1.2%2014.6l-4.3-4.3%201.4-1.4%202.9%202.9%205.9-5.9%201.4%201.4-7.3%207.3z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm-1.2%2014.6l-4.3-4.3%201.4-1.4%202.9%202.9%205.9-5.9%201.4%201.4-7.3%207.3z'/%3E%3C/svg%3E");
} .woocommerce-error::before,
.wc-block-components-notice-banner.is-error::before,
.wc-block-components-notice-banner.is-warning::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
} .woocommerce-info::before,
.woocommerce-noreviews::before,
.wc-block-components-notice-banner.is-info::before,
.wc-block-components-notice-banner.is-default::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm1%2015h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm1%2015h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
} .woocommerce-error,
.wc-block-components-notice-banner.is-error {
--vv-notice-colour: var(--sale, #fc2623);
}
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
--vv-notice-colour: #17a5a5;
}
.wc-block-components-notice-banner.is-warning {
--vv-notice-colour: #b7791f;
}
.woocommerce-info,
.woocommerce-noreviews,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-default {
--vv-notice-colour: var(--accent, #6a35d9);
} .woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
border-color: color-mix(in srgb, var(--vv-notice-colour) 42%, transparent);
background: color-mix(in srgb, var(--vv-notice-colour) 5%, #fff);
} @supports not (background: color-mix(in srgb, red 5%, #fff)) {
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
border-color: var(--base, #e4e4e8);
background: var(--base-3, #fff);
}
} .woocommerce-info:focus,
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-noreviews:focus,
.wc-block-components-notice-banner:focus {
outline: 2px solid var(--vv-notice-colour, var(--accent, #6a35d9));
outline-offset: 2px;
} .woocommerce-error li {
margin: 0;
} .wc-block-components-notice-banner.wc-block-components-notice-banner {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
margin: 0 0 12px; padding: 12px 16px 12px 48px !important;
border: 1px solid color-mix(in srgb, var(--vv-notice-colour) 42%, transparent);
border-radius: var(--vv-radius, 6px);
background: color-mix(in srgb, var(--vv-notice-colour) 5%, #fff);
box-shadow: var(--vv-shadow-card, 0 4px 14px rgba(47, 120, 255, 0.14));
color: var(--contrast, #353535);
} .wc-block-components-notice-banner.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-default {
border-color: color-mix(in srgb, var(--vv-notice-colour) 42%, transparent);
background: color-mix(in srgb, var(--vv-notice-colour) 5%, #fff);
} @supports not (background: color-mix(in srgb, red 5%, #fff)) {
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.wc-block-components-notice-banner.is-default {
border-color: var(--base, #e4e4e8);
background: var(--base-3, #fff);
}
} .wc-block-components-notice-banner.wc-block-components-notice-banner > svg {
display: none;
} .wc-block-components-notice-banner.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
flex: 1 1 auto;
align-self: center;
padding-right: 0;
} .wc-block-components-notice-banner.wc-block-components-notice-banner > .wc-block-components-button {
display: flex;
flex: 0 0 16px;
align-items: center;
align-self: center;
justify-content: center;
width: 16px;
min-width: 0;
height: 16px;
min-height: 0;
margin: 0 0 0 auto !important;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--contrast-2, #6d6d6d);
line-height: 1;
opacity: 0.7;
}
.wc-block-components-notice-banner.wc-block-components-notice-banner > .wc-block-components-button:hover,
.wc-block-components-notice-banner.wc-block-components-notice-banner > .wc-block-components-button:focus {
padding: 0;
background: none;
color: var(--contrast, #353535);
opacity: 1;
}
.wc-block-components-notice-banner.wc-block-components-notice-banner > .wc-block-components-button svg {
display: block;
width: 16px;
height: 16px;
fill: currentColor;
} .wc-block-components-notices__snackbar.wc-block-components-notice-snackbar-list {
left: auto;
right: var(--vv-space-md, 24px);
bottom: var(--vv-space-md, 24px);
width: min(360px, calc(100vw - 32px));
}
.wc-block-components-notices__snackbar .wc-block-components-notice-banner {
width: 100%;
max-width: none;
margin: 8px 0 0 !important;
font-size: 0.875rem;
line-height: 1.45;
} div.woocommerce-info a.button,
div.woocommerce-message a.button,
div.woocommerce-error a.button,
div.woocommerce-info a.woocommerce-Button,
div.woocommerce-message a.woocommerce-Button,
div.woocommerce-error a.woocommerce-Button {
float: right;
margin: -2px 0 0 16px;
padding: 9px 18px;
border: 0;
border-radius: var(--vv-radius, 6px);
background: var(--vv-gradient-purple, #6a35d9);
color: var(--base-3, #fff);
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
} div.woocommerce-info a.button:hover,
div.woocommerce-message a.button:hover,
div.woocommerce-error a.button:hover,
div.woocommerce-info a.button:focus,
div.woocommerce-message a.button:focus,
div.woocommerce-error a.button:focus,
div.woocommerce-info a.woocommerce-Button:hover,
div.woocommerce-message a.woocommerce-Button:hover,
div.woocommerce-error a.woocommerce-Button:hover,
div.woocommerce-info a.woocommerce-Button:focus,
div.woocommerce-message a.woocommerce-Button:focus,
div.woocommerce-error a.woocommerce-Button:focus {
padding: 9px 18px;
background: var(--vv-gradient-purple, #6a35d9);
color: var(--base-3, #fff);
opacity: 0.88;
} div.woocommerce-info a.button.wc-forward:after,
div.woocommerce-message a.button.wc-forward:after,
div.woocommerce-error a.button.wc-forward:after {
display: none;
} .woocommerce-info a:not(.button):not(.woocommerce-Button),
.woocommerce-message a:not(.button):not(.woocommerce-Button),
.woocommerce-error a:not(.button):not(.woocommerce-Button) {
color: var(--accent, #6a35d9);
font-weight: 600;
} @media (max-width: 640px) {
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner.wc-block-components-notice-banner { padding: 11px 13px 11px 42px !important;
font-size: 0.875rem;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-noreviews::before {
top: 12px;
left: 13px;
}
}