/* ForgePress Component: Buttons
 * Three button styles: filled, outline, ghost. Controlled by option. */

.wp-block-button .wp-block-button__link,
.button,
button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	border: 2px solid transparent;
	border-radius: var(--fp-radius, 6px);
	cursor: pointer;
	transition: background-color var(--fp-transition-base, 250ms ease),
	            color var(--fp-transition-base, 250ms ease),
	            border-color var(--fp-transition-base, 250ms ease),
	            transform var(--fp-transition-fast, 150ms ease);
	text-decoration: none;
}

/* Filled (default). */
.wp-block-button .wp-block-button__link,
.button,
button.button {
	background-color: var(--fp-color-primary);
	color: #fff;
	border-color: var(--fp-color-primary);
}

.wp-block-button .wp-block-button__link:hover,
.button:hover,
button.button:hover {
	background-color: var(--fp-color-secondary);
	border-color: var(--fp-color-secondary);
	color: #fff;
	transform: translateY(-1px);
}

/* Outline. */
.button--outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--fp-color-primary);
	border-color: var(--fp-color-primary);
}

.button--outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--fp-color-primary);
	color: #fff;
}

/* Ghost. */
.button--ghost {
	background-color: transparent;
	color: var(--fp-color-primary);
	border-color: transparent;
}

.button--ghost:hover {
	background-color: var(--fp-color-surface);
	color: var(--fp-color-primary);
}

button:disabled,
.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

button:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--fp-color-primary);
	outline-offset: 2px;
}