/* FILE: custom/_button.scss */

#{ $selectors_button } {
	display: inline-block; // Not to overflow empty paragraph container, for example.
	font-family: var(--wp--custom--button--font-family);
	font-size: var(--wp--custom--button--font-size);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	text-decoration-line: none;
	text-underline-offset: var(--wp--custom--underline--offset--default);
	text-decoration-thickness: var(--wp--custom--underline--thickness);
	text-align: center;
	letter-spacing: var(--wp--custom--button--letter-spacing);
	background: var(--theme--css--button--color--background);
	background-position: 50% 50%; // For gradient background.
	background-size: 100%; // For gradient background.
	border: var(--theme--css--button--border);
	box-shadow: var(--wp--preset--shadow--s);
	cursor: pointer;
	transition:
		transform .1s linear,
		background-color .1s linear,
		background-image .1s linear,
		background-size .4s linear,
		color .1s linear,
		border .1s linear,
		box-shadow .1s linear;

	&,
	&.has-background {
		--theme--css--current-border-color: var(--theme--css--button--color--border);

		padding: 1.125em 1.5em;
		border-color: var(--theme--css--current-border-color);
		border-radius: var(--wp--custom--button--border-radius);
	}

	&,
	.has-background &,
	.has-text-color & {

		&:not(.has-text-color) {
			// Making sure the button don't inherit parent text color.
			color: var(--theme--css--button--color--text);
		}
	}

	&:hover,
	&:focus {
		text-decoration-line: underline;
		text-decoration-style: dashed;
		background-size: 150% 100%; // For gradient background.
		box-shadow: var(--wp--preset--shadow--m);
		transform: scale(1.05);
	}

	&:focus {
		outline-color: var(--theme--css--button--color--outline);

		.has-focus-alt &,
		&.has-focus-alt {
			outline-color: inherit;
		}
	}

	&:active {
		text-decoration-line: underline;
		text-decoration-style: dotted;
		box-shadow: none;
	}

	:not(.is-style-outline) > &:not(.has-background, .has-text-color) {
		--theme--css--current-border-color: var(--theme--css--button--color--border);
	}

	// If custom background is set, make border transparent.
	&.has-background {
		--theme--css--button--color--border: transparent;
	}
}

form [type="reset"]:not([class*="wp-block-"]) {
	--theme--css--button--color--background: transparent;
	--theme--css--button--color--text: currentColor;
	--theme--css--button--color--border: currentColor;
	--theme--css--button--color--outline: currentColor;

	@extend %button_outline;
}
