abdullahtarawneh.com/assets/scss/base/mixins.scss

@mixin box-shadow {
	box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
		0 2px 2px rgba(0,0,0,0.11), 
		0 4px 4px rgba(0,0,0,0.11), 
		0 6px 8px rgba(0,0,0,0.11),
		0 8px 16px rgba(0,0,0,0.11);
}

@mixin box-shadow-heavy {
	box-shadow: 0 2px 1px rgba(0,0,0,0.09), 
               0 4px 2px rgba(0,0,0,0.09), 
               0 8px 4px rgba(0,0,0,0.09), 
               0 16px 8px rgba(0,0,0,0.09),
               0 32px 16px rgba(0,0,0,0.09);
}

@mixin focus-outline {
	outline: solid;
	outline-color: var(--primary-accent);
	outline-offset: 4px;
}

@function css-function( $function, $values... ) {
	@return 
		 $function
		 + unquote( '(' )
		 + $values
		 + unquote( ')' )
	;
}

@function css-min( $values... ) {
	@return css-function( min, $values );
}

@function css-max( $values... ) {
	@return css-function( max, $values );
}

@function css-clamp( $values... ) {
	@return css-function( clamp, $values );
}