/*
 * Inline notice that replaces the browser alert WooCommerce shows when the
 * add to cart button is pressed without a variation selected.
 *
 * Paired with assets/js/frontend/bc-variation-selection-notice.js.
 */

.bc-variation-notice[hidden] {
	display: none;
}

.bc-variation-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	inline-size: 100%;
	margin-block: 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	border-inline-start: var(--border-width-l) solid var(--color-danger);
	background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
	color: var(--color-text);
	font-size: var(--size-small);
	line-height: 1.4;
	opacity: 0;
	translate: 0 -0.25rem;
	transition: opacity 0.2s ease, translate 0.2s ease;
}

.bc-variation-notice.is-visible {
	opacity: 1;
	translate: 0 0;
}

.bc-variation-notice__icon {
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-start: 0.05rem;
	color: var(--color-danger);
}

.bc-variation-notice__text {
	margin: 0;
}

/* Attribute rows that still need a value. */

.variations tr.bc-variation-missing .label label {
	color: var(--color-danger);
}

.variations tr.bc-variation-missing .variable-items-wrapper,
.variations tr.bc-variation-missing select:not([style*="display:none"]) {
	border-radius: var(--radius-s);
	outline: var(--border-width-m) solid var(--color-danger);
	outline-offset: 6px;
	animation: bc-variation-attention 0.55s ease-in-out 2;
}

@keyframes bc-variation-attention {
	50% {
		outline-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bc-variation-notice {
		transition: none;
	}

	.variations tr.bc-variation-missing .variable-items-wrapper,
	.variations tr.bc-variation-missing select:not([style*="display:none"]) {
		animation: none;
	}
}