/**
 * To make link inherit the size of the parent
 * @param {String} element - tag or class
 * @param {String} position - pseudo-element
 *
 * Example:
 * @mixin expand-link a, before;
 */
@define-mixin expand-link $element: a, $position: before {
	position: relative;

	$(element) {
		position: static;
	}

	$(element)::$(position) {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
		background-color: transparent;
		z-index: 1;
	}
}

/**
 * Line Clamp
 * @param {Number} maxLines - Number of lines
 *
 * Example:
 * @mixin line-clamp 3;
 */
@define-mixin line-clamp $maxLines {
	display: -webkit-box;
	-webkit-line-clamp: $(maxLines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/**
 * Mixin for aspect-ratio not working yet on some browsers
 * @param ratioWidth Number
 * @param ratioHeight Number
 *
 * Example:
 * @mixin aspect-ratio 150, 200;
 */
@define-mixin aspect-ratio $ratioW, $ratioH {
	aspect-ratio: $(ratioW) / $(ratioH);

	@supports not (aspect-ratio: $(ratioW) / $(ratioH)) {
		&::before {
			content: '';
			float: left;
			padding-top: calc(($(ratioH) / $(ratioW)) * 100%);
		}

		&::after {
			content: '';
			display: block;
			clear: both;
		}
	}
}

/*********** Custom ***********/

/**
 * Handles style for background color cards with an element with a transparency background
 * Example:
 * @mixin with-background-color .my-element;
 */
@define-mixin with-background-color $transparentElClass {
	background-color: var(--card-background-color);
	color: $color-interface-grey-100;
	z-index: 1;

	$(transparentElClass) {
		background-color: rgba(255 255 255 / 20%);
	}

	&.-pink {
		--card-background-color: $color-pink;
	}
	&.-purple {
		--card-background-color: $color-purple;
	}
	&.-yellow {
		--card-background-color: $color-yellow;

		$(transparentElClass) {
			background-color: rgba(255 255 255 / 40%);
		}
	}
	&.-green {
		--card-background-color: $color-green;
	}
	&.-blue {
		--card-background-color: $color-blue;
	}
	&.-white {
		--card-background-color: $color-white;
	}
	&.-light-grey {
		--card-background-color: $color-interface-grey-20;
	}
	&.-dark-grey {
		--card-background-color: $color-interface-grey-100;
		color: $color-white;
	}
}

/**
	* Mixin for adding all color variants to a component through a css variable
  */

@define-mixin color-variants $cssVariable {
	&.-pink {
		$(cssVariable): $color-pink;
	}
	&.-purple {
		$(cssVariable): $color-purple;
	}
	&.-yellow {
		$(cssVariable): $color-yellow;
	}
	&.-green {
		$(cssVariable): $color-green;
	}
	&.-blue {
		$(cssVariable): $color-blue;
	}
}

/**
* Mixin to target only desktops
*/
@define-mixin desktop-only {
	@media (hover: hover) and (pointer: fine) {
		@mixin-content;
	}
}