@charset 'utf-8';
@use '../global' as *;

.button {
	transition: var(--transition);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: var(--button-border, none);
	border-radius: var(--button-border-radius, 0);
	background-color: var(--button-bg-color, transparent);
	color: var(--button-color, inherit);
	font-size: var(--button-font-size, inherit);
	padding: .5em 3em;
	text-decoration: none;
	&:hover,
	&:focus {
		opacity: 0.8;
		color: var(--button-color--hover, inherit);
	}
}

.button.button--primary {
	--button-bg-color: var(--ap-color-primary);
	--button-color: #fff;
	--button-color--hover: #fff;
}