@mixin flex(
	$dis: flex,
	$x: center,
	$y: center,
	$dir: row
) {
	display: $dis;
	justify-content: $x;
	align-items: $y;
	flex-direction: $dir;
}

@mixin card(
	$radius: var(--border-radius-md),
	$shadow: var(--card-shadow),
	$padding: var(--padding-sm),
	$background-color: var(--card-bg)
) {
	border-radius: $radius;
	box-shadow: $shadow;
	padding: $padding;
	background-color: $background-color;
}

@mixin transition($property: all, $duration: 0.2s, $timing-fn: linear) {
	transition: $property $duration $timing-fn;
	-webkit-transition: $property $duration $timing-fn;
}
