%button-style-default {
	background-color: var(--button-background);
	color: var(--button-color);
	box-shadow: inset 0 0 0 1px var(--button-border-color);
}

%button-style-hover {
	background-color: var(--button-hover-background);
	color: var(--button-hover-color);
	box-shadow: inset 0 0 0 1px var(--button-hover-border-color);
}

%button-style-disabled {
	background-color: var(--button-disabled-background);
	color: var(--button-disabled-color);
	box-shadow: inset 0 0 0 1px var(--button-disabled-border-color);
}

%button-shape-pill {
	border-radius: 50px;
	padding: 15px 32px;
	height: auto;
}

button.components-button, a.components-button {
	/* default theme */
	--button-color: var(--color-gray-900);
	--button-background: transparent;
	--button-border-color: transparent;

	--button-hover-color: var(--button-color);
	--button-hover-background: var(--button-background);
	--button-hover-border-color: var(--button-border-color);

	--button-disabled-color: var(--color-gray-500);
	--button-disabled-background: transparent;
	--button-disabled-border-color: transparent;

	/* style the button template */

	text-align: center;

	&:not(:disabled) {
		@extend %button-style-default;
	}

	&:hover {
		@extend %button-style-hover;
	}

	&:disabled {
		@extend %button-style-disabled;
	}

	/*
	----------------------------------------------
	Customize variants using the theming variables
	*/

	&.is-primary,
	&.is-secondary {
		@extend %button-shape-pill;
	}

	&.is-primary {
		@include font(14, 18, 900);

		--button-color: #{$color-white};
		--button-background: #{$color-blueberry};

		--button-disabled-color: #{$color-gray-100};
		--button-disabled-background: #{$color-gray-500};
	}

	&.is-secondary {
		--button-color: #{$color-blueberry};
		--button-background: #{$color-white};
		--button-border-color: #{$color-blueberry};

		--button-disabled-color: #{$color-gray-600};
		--button-disabled-background: #{$color-gray-100};
		--button-disabled-border-color: #{$color-gray-400};
	}

	&.is-tertiary {
		--button-color: #{$color-blueberry};
		--button-hover-color: #{$color-gradient-dark};

		&:focus:not(:disabled) {
			border: none;
			box-shadow: none;
		}
	}

	&.small-button {
		@include small-button;
	}
}

.ppcp--is-loading {
	button.components-button, a.components-button {
		@extend %button-style-disabled;
	}
}