/**
 * Button
 */
.wp-block-button__link,
.wp-block-file__button {
	// Extend button style
	@extend %button-style;
}

/* Default Style */
.wp-block-button__link {
	color: #{map-deep-get($config-button, "color", "text")};
	font-weight: #{map-deep-get($config-button, "font", "weight")};
	@include font-family( map-deep-get($config-button, "font", "family") );
	font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
	line-height: #{map-deep-get($config-button, "font", "line-height")};
	background-color: #{map-deep-get($config-button, "color", "background")};
	border-radius: #{map-deep-get($config-button, "border-radius")};
	padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};

	&:hover,
	&:focus,
	&.has-focus {
		color: #{map-deep-get($config-button, "color", "text-hover")};
		background-color: #{map-deep-get($config-button, "color", "background-hover")};
	}

	/* Outline Style */
	&.is-style-outline,
	.is-style-outline & {

		border: 2px solid currentcolor;

		&:not(.has-text-color) {
			color: #{map-deep-get($config-button, "color", "background")};
		}

		&:hover,
		&:focus,
		&.has-focus {
			color: #{map-deep-get($config-global, "color", "primary", "hover")};
			background: transparent;
		}

		.has-primary-background-color &:not(.has-text-color) {
			color: #{map-deep-get($config-button, "color", "text")};
		}
	}

	/* Squared Style */
	&.is-style-squared,
	.is-style-squared & {
		border-radius: 0;
	}
}

/* Default Style */
.button {
	color: #{map-deep-get($config-button, "color", "text")};
	font-weight: #{map-deep-get($config-button, "font", "weight")};
	@include font-family( map-deep-get($config-button, "font", "family") );
	font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
	line-height: #{map-deep-get($config-button, "font", "line-height")};
	background-color: #{map-deep-get($config-button, "color", "background")};
	border-radius: #{map-deep-get($config-button, "border-radius")};
	padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};

	&:hover,
	&:focus,
	&.has-focus {
		color: #{map-deep-get($config-button, "color", "text-hover")};
		background-color: #{map-deep-get($config-button, "color", "background-hover")};
	}
}