// TODO: Remove when wp-element-button state available.
.wp-block-button__link {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	transition: all .2s ease;
	white-space: pre;
	width: var(--button--width, auto);

	&:active,
	&:hover,
	&:focus {
		filter: brightness(1.1);
	}

	br + span {
		width: 100%;
		margin-top: .5em;
	}

	&:not(.has-text-color) {
		color: #fff !important;
	}

	.is-style-outline & {
		border-color: currentColor;
	}

	.is-style-outline &:not(.has-text-color) {
		color: var(--wp--preset--color--primary-600, currentColor) !important;
	}
}

.wp-block-button__width-25 {
	--button-width: 25%;
}

.wp-block-button__width-50 {
	--button-width: 50%;
}

.wp-block-button__width-75 {
	--button-width: 75%;
}

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

.has-primary-background-color {
	background: var(--wp--preset--color--primary); // Allow default gradient.
}