/* WooCommerce notice banners. Prefixed with body to override WooCommerce's block styles. */

body .wc-block-components-notice-banner {
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  margin: var(--wp--preset--spacing--20) 0;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--text-s);
  line-height: 1.5;
  color: var(--wp--preset--color--dark-green);
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--green);
  border-radius: 8px;
}

/* WooCommerce focuses new notices for screen readers, the banner itself is not interactive. */
body .wc-block-components-notice-banner:focus {
  outline: none;
}

body .wc-block-components-notice-banner > svg {
  flex-shrink: 0;
  align-self: center;
  fill: var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--green);
  border-radius: 50%;
  padding: 2px;
}

body .wc-block-components-notice-banner .wc-block-components-notice-banner__content a,
body .wc-block-components-notice-banner .wc-block-components-notice-banner__content .wc-forward {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
}

body .wc-block-components-notice-banner .wc-block-components-notice-banner__content a:hover {
  text-decoration-thickness: 2px;
}

body .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss svg {
  fill: currentColor;
}

/* Info */
body .wc-block-components-notice-banner.is-info {
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--green);
}

body .wc-block-components-notice-banner.is-info > svg {
  background-color: var(--wp--preset--color--green);
}

/* Success */
body .wc-block-components-notice-banner.is-success {
  background-color: color-mix(in srgb, var(--wp--preset--color--light-green-50) 35%, var(--wp--preset--color--white));
  border-color: var(--wp--preset--color--dark-green);
}

body .wc-block-components-notice-banner.is-success > svg {
  background-color: var(--wp--preset--color--dark-green);
}

/* Error */
body .wc-block-components-notice-banner.is-error {
  color: var(--wp--preset--color--red);
  background-color: color-mix(in srgb, var(--wp--preset--color--red) 6%, var(--wp--preset--color--white));
  border-color: var(--wp--preset--color--red);
}

body .wc-block-components-notice-banner.is-error > svg {
  background-color: var(--wp--preset--color--red);
}

/* Warning */
body .wc-block-components-notice-banner.is-warning {
  background-color: color-mix(in srgb, var(--wp--preset--color--orange) 8%, var(--wp--preset--color--white));
  border-color: var(--wp--preset--color--orange);
}

body .wc-block-components-notice-banner.is-warning > svg {
  background-color: var(--wp--preset--color--orange);
}

/*
 * Classic WooCommerce notices, still used by e.g. Subscriptions' account pages.
 * Styled like the banners above, with the font icon replaced by the banner icons.
 */

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
  position: relative;
  margin: var(--wp--preset--spacing--20) 0;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--30) + 28px + var(--wp--preset--spacing--20));
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--text-s);
  line-height: 1.5;
  list-style: none;
  border: 1px solid;
  border-radius: 8px;
}

body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--wp--preset--spacing--30);
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-position: center;
  background-size: 24px;
  background-repeat: no-repeat;
}

body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button {
  padding: 0;
  font-weight: 600;
  color: inherit;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body .woocommerce-message .button:hover,
body .woocommerce-info .button:hover,
body .woocommerce-error .button:hover {
  color: inherit;
  background: none;
  text-decoration-thickness: 2px;
}

body .woocommerce-message {
  color: var(--wp--preset--color--dark-green);
  background-color: color-mix(in srgb, var(--wp--preset--color--light-green-50) 35%, var(--wp--preset--color--white));
  border-color: var(--wp--preset--color--dark-green);
}

body .woocommerce-message::before {
  background-color: var(--wp--preset--color--dark-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z'/%3E%3C/svg%3E");
}

/* After .woocommerce-message, as some notices have both classes. */
body .woocommerce-info {
  color: var(--wp--preset--color--dark-green);
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--green);
}

body .woocommerce-info::before {
  background-color: var(--wp--preset--color--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z'/%3E%3C/svg%3E");
}

body .woocommerce-error {
  color: var(--wp--preset--color--red);
  background-color: color-mix(in srgb, var(--wp--preset--color--red) 6%, var(--wp--preset--color--white));
  border-color: var(--wp--preset--color--red);
}

body .woocommerce-error::before {
  background-color: var(--wp--preset--color--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 7h2v6h-2V7zm0 8h2v2h-2v-2z'/%3E%3C/svg%3E");
}