// TODO: Remove when wp-element-button state available.
.wp-block-button {
	position: relative;
}

a.wp-block-button__link {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	white-space: pre;
	width: var(--button--width, auto);
	transition: var(--wp--custom--transition, inherit);
	background-clip: padding-box !important; // Semi transparent borders.

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

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

	.is-style-secondary &:not(.has-background) {
		background: var(--wp--preset--color--secondary-600, var(--wp--preset--color--primary-200));
		border-color: var(--wp--preset--color--secondary-600, var(--wp--preset--color--primary-200));
	}

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

	.is-style-transparent & {
		background: transparent;
		border-color: transparent;

		&:before {
			background: currentColor; // Custom properties not available.
			opacity: 0.15;
		}
	}

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

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

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

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #fff;
		opacity: 0;
		border-radius: inherit;
		transition: var(--wp--custom--transition);
		pointer-events: none;
	}

	&:active,
	&:hover,
	&:focus {

		&:before {
			opacity: 0.1;
			transition: var(--wp--custom--transition);
		}
	}
}

.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%;
}