a.wp-block-enblocks-button,
button.wp-block-enblocks-button {
	position: relative;
	z-index: 1;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	border: 2px solid transparent;
	border-radius: inherit;
	background-color: transparent;
	font: inherit;
	line-height: 1.1;
	padding: 0.75em 1.5em;
	text-decoration: none;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;

	&.has-animated-bg {
		border: 0;
	}

	&:focus {
		outline: none;
		text-decoration: none;
	}

	&:focus-visible {
		outline: 2px dashed var(--enb-color-primary-600);
		outline-offset: 0.25em;
	}

	> .enb-animated-bg {
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		max-inline-size: unset !important;
	}

	.enb-svg-icon {
		min-inline-size: 1em;

		svg {
			display: block;
			inline-size: inherit;
			block-size: inherit;
		}
	}
}

a.enb-primary-button,
button.enb-primary-button {
	background-color: var(--enb-color-800);
	color: var(--enb-color-white);

	&:hover,
	&:active {
		background-color: var(--enb-color-primary-600);
	}
}

a.enb-secondary-button,
button.enb-secondary-button {
	border-color: var(--enb-color-700);
	color: var(--enb-color-800);

	&:hover,
	&:active {
		border-color: var(--enb-color-primary-600);
		background-color: var(--enb-color-primary-50);
		color: var(--enb-color-primary-600);
	}
}

a.enb-tertiary-button,
button.enb-tertiary-button {
	color: var(--enb-color-800);
	text-decoration: underline var(--enb-color-800) 2px;
	text-underline-offset: 0.5em;

	&:hover,
	&:active {
		color: var(--enb-color-primary-600);
		text-decoration-color: var(--enb-color-primary-600);
	}
}

a.enb-disabled-button,
button.enb-disabled-button {
	background-color: var(--enb-color-800);
	color: var(--enb-color-white);
	opacity: 0.5;
	cursor: not-allowed;
}