@import "themes";

@mixin avatar($size, $circle: false) {
	max-width: $size;
	width: $size;
	height: $size;
	overflow: hidden;

	@if $circle {
		border-radius: $size / 2;

		img {
			border-radius: $size / 2;
			height: 100%;
		}
	}
}

@mixin pseudo($t: 0, $r: 0, $b: 0, $l: 0) {
	content: "";
	position: absolute;
	top: $t;
	left: $l;
	right: $r;
	bottom: $b;
}

@mixin bg-props($s: cover, $p: center top, $r: no-repeat) {
	background-size: $s;
	background-position: $p;
	background-repeat: $r;
}

@mixin flexbox($a: inherit, $jc: space-between, $w: wrap) {
	align-items: $a;
	display: flex;
	flex-wrap: $w;
	justify-content: $jc;
}

@mixin respond($device) {
	@if ($device == min-xl) {
		@media screen and (min-width: 1441px) and (max-width: 1600px) {
			@content;
		}
	} @else if($device == min-lg) {
		@media screen and (min-width: 1200px) {
			@content;
		}
	}

	@if $device == xl {
		@media screen and (max-width: 1440px) {
			@content;
		}
	} @else if $device == medium {
		@media screen and (max-width: 1199px) {
			@content;
		}
	} @else if $device == tab-land {
		@media screen and (max-width: 991px) {
			@content;
		}
	} @else if $device == tab-port {
		@media screen and (max-width: 767px) {
			@content;
		}
	} @else if $device == phone {
		@media screen and (max-width: 575px) {
			@content;
		}
	} @else if $device == phone-sm {
		@media screen and (max-width: 479px) {
			@content;
		}
	} @else if $device == only-tab {
		@media (min-width: 768px) and (max-width: 991px) {
			@content;
		}
	}
}

@mixin gradient-btn($clr1: $color-red, $clr2: $color-orange, $d: to right) {
	background-image: linear-gradient($d, $clr1 0%, $clr2 50%, $clr1 100%);
}

@mixin themify($themes: $themes) {
	@each $theme, $map in $themes {
		.theme-#{$theme} & {
			$theme-map: () !global;

			@each $key, $submap in $map {
				$value: map-get(map-get($themes, $theme), "#{$key}");
				$theme-map: map-merge(
					$theme-map,
					(
						$key: $value,
					)
				) !global;
			}

			@content;
			$theme-map: null !global;
		}
	}
}