themes-wordpress/seedlet/assets/sass/base/_extends.scss

@mixin button-style {
	@include button-main-styles;
	@include button-hover-styles;
}

@mixin button-main-styles {
	@include crop-text(var(--button--line-height));
	color: var(--button--color-text);
	cursor: pointer;
	font-weight: var(--button--font-weight);
	font-family: var(--button--font-family);
	font-size: var(--button--font-size);
	background-color: var(--button--color-background);
	border-radius: var(--button--border-radius);
	border-width: 0;
	text-decoration: none;
	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}

@mixin button-hover-styles {
	&:not(.has-background) {
		&:active {
			color: var(--button--color-text-active);
			background-color: var(--button--color-background-active);
		}

		&:hover,
		&:focus,
		&.has-focus {
			color: var(--button--color-text-hover);
			background-color: var(--button--color-background-hover);
		}
	}
}

// Button Placeholder style
// - Since buttons appear in various blocks,
//   let’s use a placeholder to keep them all
//   in-sync
%button-style {
	@include button-style;
}

// Onsale Placeholder style
// - Since buttons appear in various blocks,
//   let’s use a placeholder to keep them all
//   in-sync
%onsale-style {
	border-radius: 100%;
	background-color: var(--global--color-alert-warning);
	color: var(--global--color-foreground-high-contrast);
	font-size: var(--global--font-size-sm);
	font-weight: 700;
	font-family: var(--global--font-primary);
	min-height: 3.236rem;
	min-width: 3.236rem;
	padding: 0.202rem;
	position: absolute;
	text-align: center;
	text-transform: none;
	line-height: 3.236;
	top: -0.5em;
	right: -0.5em;
	left: auto;
	margin: 0;
	z-index: 9;
}