/* Opt-in components: never target generic WooCommerce or Addify buttons. */
.ov-button {
	--ov-button-height: var(--height-56);
	--ov-button-size: var(--font-size-button);
	--ov-button-line: var(--line-height-button);
	--ov-button-bg: var(--color-bg-action-primary);
	--ov-button-ink: var(--color-text-primary);
	--ov-button-border: transparent;
	--ov-button-focus-bg: var(--color-bg-page);
	display: inline-grid;
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	box-sizing: border-box;
	min-height: var(--ov-button-height);
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 10px var(--action-padding-inline);
	border: 2px solid var(--ov-button-border);
	border-radius: var(--radius-16);
	background: var(--ov-button-bg);
	color: var(--ov-button-ink);
	box-shadow: none;
	font-family: var(--font-ui);
	font-size: var(--ov-button-size);
	font-weight: var(--font-weight-regular);
	line-height: var(--ov-button-line);
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation;
	transition: background-color var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
}

.ov-button--featured {
	--ov-button-height: var(--height-64);
	--ov-button-size: var(--font-size-button-lg);
	--ov-button-line: var(--line-height-button-lg);
	padding-block: 12px;
}

.ov-button--secondary {
	--ov-button-bg: transparent;
	--ov-button-border: var(--color-text-primary);
}

.ov-button--subtle {
	--ov-button-bg: transparent;
	--ov-button-focus-bg: transparent;
}

.ov-button--destructive {
	--ov-button-bg: var(--color-feedback-error-bg);
	--ov-button-ink: var(--color-feedback-error-ink);
	--ov-button-focus-bg: var(--color-feedback-error-bg);
}

/* Both layers contribute to sizing, so loading does not move nearby controls. */
.ov-button__content,
.ov-button__progress {
	display: flex;
	grid-area: 1 / 1;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-12);
	min-width: 0;
	max-width: 100%;
}

.ov-button__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ov-button__progress {
	visibility: hidden;
}

.ov-button--full-width { width: 100%; text-align: start; }
.ov-button--full-width > :is(.ov-button__content, .ov-button__progress) { width: 100%; justify-content: flex-start; }
.ov-button--arrow-slide > .ov-button__content { gap: 0; }
/* A flexible spacer moves only the arrow, using the available button width. */
.ov-button--arrow-slide > .ov-button__content::after {
	content: "";
	order: 1;
	flex: 0 1 0px;
	transition: flex-grow var(--transition-arrow);
}
.ov-button--arrow-slide > .ov-button__content > .ov-icon--arrow-right { order: 2; margin-inline-start: var(--spacing-12); }
@media (hover: hover) {
	.ov-button--arrow-slide:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) > .ov-button__content::after { flex-grow: 1; }
}

.ov-icon {
	display: block;
	flex: none;
	color: inherit;
	fill: none;
	pointer-events: none;
}

.ov-icon--arrow-right { width: 16px; height: 14px; }
.ov-icon--trash { width: 20px; height: 20px; }
.ov-icon--loading { width: 18px; height: 18px; }
.ov-icon:is(.ov-icon--heart, .ov-icon--search, .ov-icon--close, .ov-icon--menu) { width: 24px; height: 24px; }

/* Hover is restricted to pointers that support it, avoiding sticky touch states. */
@media (hover: hover) {
	.ov-button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
		background: var(--color-text-primary);
		border-color: var(--color-text-primary);
		color: var(--color-text-inverse);
		text-decoration: none;
	}
}

.ov-button:focus:not(:focus-visible) {
	outline: none;
}

.ov-button:focus-visible:not(:disabled):not([aria-disabled="true"]) {
	background: var(--ov-button-focus-bg);
	border-color: transparent;
	color: var(--ov-button-ink);
	outline: var(--focus-width) solid var(--color-border-focus);
	outline-offset: var(--focus-offset);
}

.ov-button:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
	background: var(--color-text-primary);
	border-color: var(--color-text-primary);
	color: var(--color-text-inverse);
}

.ov-button--subtle:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]),
.ov-button--destructive:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]),
.ov-button--icon:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
	border-color: var(--color-border-focus);
}

.ov-button:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
	background: var(--color-bg-subtle);
	border-color: transparent;
	color: var(--ov-button-ink);
	opacity: 0.5;
	cursor: not-allowed;
}

.ov-button--secondary:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
	background: transparent;
	border-color: var(--color-border-focus);
}

.ov-button[aria-busy="true"] {
	background: var(--ov-button-bg);
	border-color: var(--ov-button-border);
	color: var(--ov-button-ink);
	/* Storefront forces disabled opacity with !important, including during loading. */
	opacity: 1 !important;
	cursor: progress;
}

.ov-button--secondary[aria-busy="true"] {
	border-color: var(--color-border-focus);
}

:is(.ov-button, .ov-link)[aria-busy="true"] .ov-button__content {
	visibility: hidden;
}

:is(.ov-button, .ov-link)[aria-busy="true"] .ov-button__progress {
	visibility: visible;
}

:is(.ov-button, .ov-link)[aria-busy="true"] .ov-icon--loading {
	animation: ov-button-spin 0.8s linear infinite;
	transform-origin: center;
}

.ov-button--icon {
	width: var(--ov-button-height);
	height: var(--ov-button-height);
	min-width: var(--ov-button-height);
	flex-shrink: 0;
	padding: 0;
}

.ov-button--icon .ov-button__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@keyframes ov-button-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ov-button,
	.ov-button--arrow-slide > .ov-button__content::after {
		transition: none;
	}

	:is(.ov-button, .ov-link)[aria-busy="true"] .ov-icon--loading {
		animation: none;
	}
}

@media (forced-colors: active) {
	.ov-button {
		border-color: ButtonText;
	}

	.ov-button:focus-visible:not(:disabled):not([aria-disabled="true"]) {
		outline-color: Highlight;
	}

	.ov-button:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
		color: GrayText;
		border-color: GrayText;
		opacity: 1 !important;
	}
}