woocommerce/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss

// Converts a font-size in px to rem and optionally sets a relative line-height.
@mixin font-size($sizeValue: 16, $lineHeight: false ) {
	font-size: $sizeValue + px;
	font-size: ($sizeValue / 16) + rem;
	@if ($lineHeight) {
		line-height: $lineHeight / $sizeValue;
	}
}

@mixin hover-state {
	&:hover,
	&:active,
	&:focus {
		@content;
	}
}

@keyframes loading-fade {
	0% {
		opacity: 0.7;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.7;
	}
}

// Adds animation to placeholder section
@mixin placeholder() {
	animation: loading-fade 1.2s ease-in-out infinite;
	background-color: $core-grey-light-500 !important;
	border-color: $core-grey-light-500 !important;
	color: $core-grey-light-500 !important;
	box-shadow: none;
	pointer-events: none;

	// Forces direct descendants to keep layout but lose visibility.
	> * {
		visibility: hidden;
	}

	@media screen and (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

@mixin force-content() {
	&::after {
		content: "\00a0";
	}
}

// Adds animation to transforms
@mixin animate-transform( $duration: 0.2s ) {
	transition: transform ease $duration;

	@media screen and (prefers-reduced-motion: reduce) {
		transition: none;
	}
}

// Hide an element from sighted users, but availble to screen reader users.
@mixin visually-hidden() {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
	overflow-wrap: normal !important;
	word-wrap: normal !important;
}

// Unhide a visually hidden element
@mixin visually-shown() {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: unset;
	overflow: hidden;
}

// Reset <button> style so we can use link style for action buttons.
@mixin link-button() {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;

	box-shadow: none;
	display: inline;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-decoration: underline;
	text-transform: none;
	vertical-align: baseline;

	background: transparent;
	&:hover,
	&:focus,
	&:active {
		background: transparent;
	}
}

// Makes sure long words are broken if they overflow the container.
@mixin wrapBreakWord {
	// This is the current standard, works in most browsers.
	overflow-wrap: anywhere;
	// Safari supports word-break.
	word-break: break-word;
	// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.
	-ms-word-break: break-all;
}

@function rem($size, $base: 16px ) {
	@return $size / $base * 1rem;
}