/**
 * woocommerce/store-notices block styles.
 *
 * Hand-written and enqueued as-is from the `$block_styles` map in
 * functions.php; there is no build step for this file, so edit it directly and
 * keep the properties logical (`padding-inline`, `margin-block`) -- nothing
 * under assets/css/ passes through rtlcss.
 *
 * This is the banner that says "... have been added to your cart" above the
 * product, shop and cart templates. On a block theme WooCommerce swaps its
 * classic notice templates for the block ones
 * (Blocks\Domain\Services\Notices::get_notices_template), so the markup here is
 * always the banner shape and never the older `.woocommerce-message`:
 *
 *   .wc-block-components-notice-banner.is-success
 *     > svg                                          the tick, on its disc
 *     > .wc-block-components-notice-banner__content  the sentence, then
 *                                                    a.wc-forward ("View cart")
 *
 * Four things are wrong with what core and the theme paint between them, and
 * all four show on the success banner:
 *
 *   1. Core tints the tick's disc `#4ab866` while this theme paints the banner
 *      `--success` (#3fca90). Two greens a shade apart make the icon read as a
 *      smudge. Here the disc is `currentColor` -- the banner's own ink -- and
 *      the tick takes the banner's surface, so the icon is the banner inverted
 *      at every severity and cannot sink into it whatever the palette does.
 *   2. Core floats `.wc-forward` right. A float is not a flex item, so the
 *      action lands on the first line of the sentence rather than on the
 *      banner's centre line, and nothing agrees with the icon. The content box
 *      is a flex row here instead, which puts icon, sentence and action on one
 *      centre line and lets the action wrap under the sentence when it has to.
 *   3. `.wc-forward` arrives as underlined body text at 70% opacity, which on a
 *      saturated fill is the least legible thing in the banner. It is a
 *      bordered pill here that inverts to a solid one on hover, so it reads as
 *      the thing to click.
 *   4. The edge was a hard colour stop -- a transparent border the width of a
 *      hairline, the same colour as the fill, on an 18px radius that made a
 *      52px bar read as a lozenge. It now carries a rim of its own ink on an
 *      8px radius, so the corner is a soft turn rather than a bubble and the
 *      edge resolves without a shadow to prop it up.
 *
 * Deliberately not here: the notice type size, which still comes from the
 * shared `.wc-block-components-notice-banner` rules in
 * assets/scss/woocommerce/_wc-blocks.scss. Those rules also serve the checkout,
 * order-confirmation and account notices, which are other blocks and are not
 * this file's to move.
 *
 * Mobile-first, with the one breakpoint block last -- DECISIONS.md #2.
 */

.wp-block-woocommerce-store-notices {

	.wc-block-components-notice-banner {

		/*
		 * Severity is carried on two custom properties rather than repeated
		 * across the paint rules below, because the icon and the action pill
		 * both need to invert against the surface and would otherwise each
		 * need their own copy of the four variants.
		 */
		--eride-notice-surface: var(--wp--preset--color--gray-100);
		--eride-notice-ink: var(--wp--preset--color--base);

		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 12px;

		/*
		 * `!important` answers core's own on the same declaration
		 * (assets/client/blocks/wc-blocks.css sets `padding: 16px !important`),
		 * which is why the theme's unflagged `padding: 14px 24px` in the SCSS
		 * never took effect.
		 */
		padding: 14px 18px !important;
		margin-block: 0 24px;

		border: 1px solid transparent;
		border-radius: 8px;
		line-height: 1.5;

		> svg {

			/*
			 * Core gives the icon `height: 100%`, which resolves against a
			 * banner whose height depends on the icon. Pinning both axes to the
			 * SVG's own 24px keeps the disc a circle however long the sentence
			 * wraps.
			 */
			flex: none;
			align-self: center;
			box-sizing: border-box;
			width: 24px;
			height: 24px;
			padding: 2px;
			border-radius: 50%;
		}

		> .wc-block-components-notice-banner__content {
			flex-basis: 100%;
			align-self: center;

			/*
			 * Core insets the content 16px on the right to clear its floated
			 * action. The action is a flex item now and brings its own inset,
			 * and the physical property has to be cleared on both sides or it
			 * survives on the start edge in RTL.
			 */
			padding-inline: 0;
			white-space: normal;
		}

		/*
		 * Only the banners that carry an action become a row. `:has()` keeps
		 * the error banner's summary and list of messages in ordinary flow,
		 * where a flex row would have set them side by side.
		 */
		> .wc-block-components-notice-banner__content:has(.wc-forward) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 8px 16px;
		}

		> .wc-block-components-notice-banner__content .wc-forward {

			/*
			 * Each `!important` below answers one of core's on the same
			 * declaration, or the theme SCSS's on `color`. The rest of the
			 * block wins on the extra class this file's root supplies.
			 */
			flex: none;
			margin: 0;
			padding: 7px 18px !important;
			border: 1px solid color-mix(in srgb, currentcolor 45%, transparent);
			border-radius: 9999px;
			background: color-mix(in srgb, currentcolor 16%, transparent) !important;
			color: inherit !important;
			opacity: 1;
			font-size: 13px;
			font-weight: 600;
			letter-spacing: 0.03em;
			line-height: 1.4;
			text-decoration: none;
			white-space: nowrap;
			transition:
				background-color 0.2s ease-in-out,
				border-color 0.2s ease-in-out,
				color 0.2s ease-in-out;

			&:hover,
			&:focus,
			&:active {

				/*
				 * `currentcolor` cannot be used for the fill here: `color` is
				 * being reassigned in the same rule, so the keyword would
				 * resolve to the surface, not the ink.
				 */
				background: var(--eride-notice-ink) !important;
				border-color: var(--eride-notice-ink);
				color: var(--eride-notice-surface) !important;
				text-decoration: none;
			}

			&:focus-visible {
				outline: 2px solid currentcolor;
				outline-offset: 2px;
			}
		}
	}

	/*
	 * Severity, one class deeper than the layout above it. Core paints its own
	 * pale surfaces from `.wc-block-components-notice-banner.is-success` and
	 * friends -- two classes -- which this file's single-class root only ties.
	 * `:is()` buys the extra class without a level of nesting that would claim
	 * a nesting in the markup that isn't there. DECISIONS.md #5.
	 */
	.wc-block-components-notice-banner:is(.is-success, .is-error, .is-info, .is-warning) {
		background-color: var(--eride-notice-surface);
		color: var(--eride-notice-ink);
		border-color: color-mix(in srgb, currentcolor 28%, transparent);

		> svg {
			background-color: currentcolor;
			fill: var(--eride-notice-surface);
		}
	}

	/* The surfaces themselves, unchanged from what the SCSS already chose. */
	.wc-block-components-notice-banner.is-success {
		--eride-notice-surface: var(--wp--preset--color--success);
	}

	.wc-block-components-notice-banner.is-error {
		--eride-notice-surface: var(--wp--preset--color--danger);
	}

	.wc-block-components-notice-banner.is-info {
		--eride-notice-surface: var(--wp--preset--color--info);
	}

	/*
	 * Warning is the one surface light enough to need dark ink, and core leaves
	 * it pale, so it is set here rather than left to the shared SCSS -- which
	 * never covered it.
	 */
	.wc-block-components-notice-banner.is-warning {
		--eride-notice-surface: var(--wp--preset--color--warning);
		--eride-notice-ink: var(--wp--preset--color--gray-100);
	}
}

/* md -- the bar has room for a fuller gutter once it is off a phone. */
@media (min-width: 48rem) {

	.wp-block-woocommerce-store-notices .wc-block-components-notice-banner {
		gap: 14px;
		padding: 16px 24px !important;
	}
}