.button,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.5rem;
	border: 2px solid transparent;
	border-radius: 0;
	font-family: var(--sk-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--sk-transition), color var(--sk-transition), border-color var(--sk-transition);
}

.button--solid {
	background: var(--sk-accent);
	color: var(--sk-white);

	&:hover {
		background: var(--sk-accent-dark);
		color: var(--sk-white);
		text-decoration: none;
	}
}

.button--outline {
	border-color: currentcolor;
	background: transparent;
	color: currentcolor;

	&:hover {
		background: var(--sk-white);
		color: var(--sk-accent);
		text-decoration: none;
	}
}

/* The "See full capabilities →" treatment: underlined link, not a filled button. */
.button--arrow {
	padding: 0;
	border: 0;
	border-bottom: 2px solid var(--sk-support);
	background: none;
	color: var(--sk-black);

	&::after {
		content: "\2192";
	}

	&:hover {
		color: var(--sk-accent);
		text-decoration: none;
	}
}

.is-style-arrow-link .wp-element-button {
	padding: 0;
	border-bottom: 2px solid var(--sk-support);
	background: none;
	color: var(--sk-black);
}