/**
 * Sistema global de botones.
 *
 * @package Groowleck
 */

.button,
.wp-element-button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--groowleck-space-2);
	min-height: 2.75rem;
	padding: var(--groowleck-space-3) var(--groowleck-space-5);
	border: var(--groowleck-border-width) solid transparent;
	border-radius: var(--groowleck-radius-md);
	background: var(--groowleck-color-accent);
	color: var(--groowleck-color-white);
	font-weight: var(--groowleck-font-weight-semibold);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: var(--groowleck-transition-interactive);
}

.button:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	background: var(--groowleck-color-accent-hover);
	color: var(--groowleck-color-white);
	transform: translateY(-1px);
}

.button:active,
.wp-element-button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	transform: translateY(0);
}

.button:disabled,
.wp-element-button:disabled,
button:disabled,
input:disabled {
	cursor: not-allowed;
	opacity: 0.55;
	transform: none;
}

.button--secondary {
	border-color: var(--groowleck-color-brand);
	background: var(--groowleck-color-brand);
}

.button--secondary:hover {
	background: var(--groowleck-color-brand-soft);
}

.button--outline {
	border-color: var(--groowleck-color-accent);
	background: transparent;
	color: var(--groowleck-color-accent);
}

.button--outline:hover {
	background: var(--groowleck-color-accent-soft);
	color: var(--groowleck-color-accent-hover);
}

.button--ghost {
	background: transparent;
	color: var(--groowleck-color-text-heading);
}

.button--ghost:hover {
	background: var(--groowleck-color-surface);
	color: var(--groowleck-color-accent);
}

.button--small {
	min-height: 2.25rem;
	padding: var(--groowleck-space-2) var(--groowleck-space-4);
	font-size: var(--groowleck-font-size-sm);
}

.button--large {
	min-height: 3.25rem;
	padding: var(--groowleck-space-4) var(--groowleck-space-6);
	font-size: var(--groowleck-font-size-lg);
}

.button--block {
	width: 100%;
}

.button-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--groowleck-space-3);
}