// Truncate the text with an ellipsis
@mixin truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// Display a drop shadow
@mixin shadow {
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

// A mixin used to generate a ring shadow
@mixin ring($color, $width) {
    box-shadow: 0 0 0 (1px * $width) $color;
}

// A mixin used to generate an glow shadow
@mixin glow($color, $size: 1) {
	box-shadow: 6px * $size 6px * $size 40px * $size $color;
}

// Apply the given block only in dark mode
@mixin dark {
	.w-app--dark & {
		@content;
	}
}

// Define a media query for the given breakpoint
@mixin breakpoint($size) {
	@if $size == sm {
	  	@media (min-width: 601px) { @content; }
	} @else if $size == md {
	  	@media (min-width: 901px) { @content; }
	} @else if $size == lg {
	  	@media (min-width: 1201px) { @content; }
	} @else if $size == xl {
	  	@media (min-width: 1701px) { @content; }
	}
}

// Define the font weight by the given preset
@mixin font-weight($weight) {
	$font-weights: (
		"thin": 100,
		"extralight": 200,
		"light": 300,
		"normal": 400,
		"medium": 500,
		"semibold": 600,
		"bold": 700,
		"extrabold": 800,
		"black": 900
	);

	font-weight: map-get($font-weights, $weight);
}

// Define the font size by the given preset
@mixin font-size($type) {
	$font-sizes: (
		"xs": ( 0.8rem, 1rem ),
		"sm": ( 0.875rem, 1.25rem ),
		"base": ( 1rem, 1.5rem ),
		"lg": ( 1.125rem, 1.5rem ),
		"xl": ( 1.25rem, 1.75rem ),
		"2xl": ( 1.5rem, 2rem ),
		"3xl": ( 1.875rem, 2.25rem ),
		"4xl": ( 2.25rem, 2.5rem ),
		"5xl": ( 3rem, 1 ),
		"6xl": ( 3.75rem, 1),
		"7xl": ( 4.5rem, 1),
		"8xl": ( 6rem, 1),
		"9xl": ( 8rem, 1)
	);

	$value: map-get($font-sizes, $type);

	font-size: nth($value, 1);
	line-height: nth($value, 2);
}

// Generate transition rules of a predefined type
@mixin transition($type) {
	@if $type == none {
		transition-property: none;
	} @else {
		$transitions: (
			"all": ( all ),
			"size": ( width, height, min-width, max-width, min-height, max-height ),
			"colors": ( background-color, border-color, color, fill, stroke ),
			"shadow": ( box-shadow, text-shadow ),
			"transform": ( transform ),
			"opacity": ( opacity )
		);
		
		transition-property: map-get($transitions, $type);
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
	}
}

// Define the margin based on the given amount and side
@mixin margin($amount, $side: a) {
	$value: 0.25rem * $amount;

	@if $side == a {
		margin: $value;
	} @else if $side == t {
		margin-top: $value;
	} @else if $side == r {
		margin-right: $value;
	} @else if $side == b {
		margin-bottom: $value;
	} @else if $side == l {
		margin-left: $value;
	} @else if $side == x {
		margin-left: $value;
		margin-right: $value;
	} @else if $side == y {
		margin-top: $value;
		margin-bottom: $value;
	}
}

// Define the padding based on the given amount and side
@mixin padding($amount, $side: a) {
	$value: 0.25rem * $amount;

	@if $side == a {
		padding: $value;
	} @else if $side == t {
		padding-top: $value;
	} @else if $side == r {
		padding-right: $value;
	} @else if $side == b {
		padding-bottom: $value;
	} @else if $side == l {
		padding-left: $value;
	} @else if $side == x {
		padding-left: $value;
		padding-right: $value;
	} @else if $side == y {
		padding-top: $value;
		padding-bottom: $value;
	}
}

// Generate border radius of specific conditions
@mixin rounded($type: sm, $side: a) {
	$radii: (
		"none": 0px,
		"xs": 0.125rem, // tailwind: sm
		"sm": 0.25rem, // tailwind: <empty>
		"md": 0.375rem,
		"lg": 0.5rem,
		"xl": 0.75rem,
		"2xl": 1rem,
		"3xl": 1.5rem,
		"full": 9999px,
	);

	$amount: map-get($radii, $type);

	@if $side == a {
		border-radius: $amount;
	} @else if $side == tr {
		border-top-right-radius: $amount;
	} @else if $side == tl {
		border-top-left-radius: $amount;
	} @else if $side == br {
		border-bottom-right-radius: $amount;
	} @else if $side == bl {
		border-bottom-left-radius: $amount;
	} @else if $side == l {
		border-top-left-radius: $amount;
		border-bottom-left-radius: $amount;
	} @else if $side == r {
		border-top-right-radius: $amount;
		border-bottom-right-radius: $amount;
	} @else if $side == t {
		border-top-left-radius: $amount;
		border-top-right-radius: $amount;
	} @else if $side == b {
		border-bottom-left-radius: $amount;
		border-bottom-right-radius: $amount;
	}
}