/** @format */

@use 'sass:math';

// Rem output with px fallback
@mixin font-size( $sizeValue: 16, $lineHeight: false ) {
	font-size: $sizeValue + px;
	font-size: math.div( $sizeValue, 16 ) + rem;
	@if ( $lineHeight ) {
		line-height: $lineHeight;
	}
}

// Adds animation to placeholder section
@mixin placeholder( $bg-color: $core-light-gray-500 ) {
	animation: loading-fade 1.6s ease-in-out infinite;
	background: $bg-color;
	color: transparent;

	&::after {
		content: '\00a0';
	}
}

@mixin modal-footer-buttons {
	display: flex;
	justify-content: flex-end;

	> * {
		&:not( :first-child ) {
			margin-left: $grid-unit-20;
		}
	}
}

@mixin modal-footer-buttons-left {
	display: flex;

	> * {
		&:not( :last-child ) {
			margin-right: $grid-unit-20;
		}
	}
}

// WooCommerce/Body Large
@mixin wc-body-large {
	font-size: 16px;
	line-height: 24px;
}

// WooCommerce/Body Small
@mixin wc-body-small {
	font-size: 14px;
	line-height: 18px;
}

// WooCommerce/Others/Caption
@mixin wc-others-caption {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
}

// WordPress/Title Large
@mixin wp-title-large {
	font-size: 32px;
	line-height: 40px;
	font-weight: 400;
}

// WordPress/Title Medium
@mixin wp-title-medium {
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
}

// WordPress/Title Small
@mixin wp-title-small {
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
}

// WordPress/Label
@mixin wp-label {
	font-size: 13px;
	line-height: 16px;
	font-weight: 400;
}

// WordPress/Subtitle
@mixin wp-subtitle {
	@include wc-body-large;
	font-weight: 600;
}

// WordPress/Subtitle Small
@mixin wp-subtitle-small {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

// WordPress/Small Button
@mixin wp-small-button {
	font-size: 11px;
	line-height: 16px;
}

@mixin heading-xl {
	/* Heading XL */
	font-size: var( --xl, 20px );
	font-style: normal;
	font-weight: var( --Medium, 500 );
	line-height: var( --m, 24px ); /* 120% */
}
@mixin heading-lg {
	/* Heading LG */
	font-size: var( --l, 15px );
	font-style: normal;
	font-weight: var( --Medium, 500 );
	line-height: var( --s, 20px ); /* 133.333% */
}
@mixin heading-md {
	/* Heading MD */
	font-size: var( --m, 13px );
	font-style: normal;
	font-weight: var( --Medium, 500 );
	line-height: var( --s, 20px ); /* 153.846% */
}
@mixin heading-sm {
	/* Heading S */
	font-size: var( --xs, 11px );
	font-style: normal;
	font-weight: var( --Medium, 500 );
	line-height: var( --xs, 16px ); /* 145.455% */
}
@mixin body-md {
	/* Body MD */
	font-size: var( --m, 13px );
	font-style: normal;
	font-weight: var( --Regular, 400 );
	line-height: var( --s, 20px ); /* 153.846% */
}
@mixin body-sm {
	/* Body SM */
	font-size: var( --s, 12px );
	font-style: normal;
	font-weight: var( --Regular, 400 );
	line-height: var( --xs, 16px ); /* 133.333% */
}
