@use "sass:map";
@use "sass:meta";
@use "sass:list";
@use "sass:math";
@use "sass:selector";
@use "variables" as var;

/**
 * Slightly lighten a color
 * @access public
 * @param {Color} $color - color to tint
 * @param {Number} $percentage - percentage of `$color` in returned color
 * @return {Color}
 **/
@function tint($color, $percentage) {
	@return mix(white, $color, $percentage);
}

/**
 * Slightly darken a color
 * @access public
 * @param {Color} $color - color to shade
 * @param {Number} $percentage - percentage of `$color` in returned color
 * @return {Color}
 **/
@function shade($color, $percentage) {
	@return mix(black, $color, $percentage);
}

@mixin full-height() {
	height: calc(100vh - #{var.$toolbar-main-nav-height});
}

@mixin icon-margin($direction) {
	margin-#{$direction}: var.$spacing;

	&-large {
		margin-#{$direction}: var.$spacing * 2;
	}
	&-very-large {
		margin-#{$direction}: var.$spacing * 4;
	}
	&-small {
		margin-#{$direction}: math.div(var.$spacing, 2);
	}
}

/**
 * Must be used only inside a override-X mixin.
 */
@mixin drop-shadow() {
	@at-root #{selector.replace(&, "body", "body.dark-theme")} {
		box-shadow: var.$dark-box-shadow;
	}
	@at-root #{selector.replace(&, "body", "body.light-theme")} {
		box-shadow: var.$light-box-shadow;
	}
}

/**
 * Must be used only inside a override-X mixin.
 */
@mixin bottom-picture() {
	&::after {
		content: "";
		display: block;
		height: var.$end-bg-size;
		background-repeat: no-repeat;
		background-size: cover;
		@at-root #{selector.replace(&, "body", "body.dark-theme")} {
			background-image: url(var.$assets-path + "/images/bottom_picture_metromob_dark/bottom_picture_metromob_dark.png");

			@media only screen and (min-resolution: 200dpi), only screen and (min-width: 1024px) {
				background-image: url(var.$assets-path + "/images/bottom_picture_metromob_dark/bottom_picture_metromob_dark@2x.png");
			}
		}
		@at-root #{selector.replace(&, "body", "body.light-theme")} {
			background-image: url(var.$assets-path + "/images/bottom_picture_metromob_light/bottom_picture_metromob_light.png");

			@media only screen and (min-resolution: 200dpi), only screen and (min-width: 1024px) {
				background-image: url(var.$assets-path + "/images/bottom_picture_metromob_light/bottom_picture_metromob_light@2x.png");
			}
		}
	}
}

@function switch($test, $args...) {
	$cases: meta.keywords($args);
	@if (map.has-key($cases, $test)) {
		@return map.get($cases, $test);
	} @else if map.has-key($cases, "default") {
		@return map.get($cases, "default");
	} @else {
		@return null;
	}
}

/**
 * Sass debug function from https://codepen.io/KittyGiraudel/pen/unyBH
 **/
@function debug-map($list, $pre: true, $level: 1) {
	$tab: "    ";
	$indent: "";
	$break: if($pre, "\A ", "");

	@if length($list) == 0 {
		@return "( )";
	}

	@if length($list) == 1 {
		@return if($pre, "(" + type-of($list) + ") ", "") + $list;
	}

	@for $i from 1 to $level {
		$indent: $indent + $tab;
	}

	$result: "[" + $break;

	@for $i from 1 through length($list) {
		$item: nth($list, $i);
		$result: $result + if($pre, $indent + $tab, " ");

		@if length($item) > 1 {
			$result: $result + if($pre, "(list: " + length($item) + ") ", "") + debug-map($item, $pre, $level + 1);
		} @else {
			@if $pre {
				$result: $result + "(" + type-of($item) + ") ";
			}

			@if length($item) == 0 {
				$result: $result + "( )";
			} @else if type-of($item) == string {
				$result: $result + quote($item);
			} @else if $item == null {
				$result: $result + "null";
			} @else {
				$result: $result + $item;
			}
		}

		@if $i != length($list) {
			$result: $result + "," + $break;
		}
	}

	$result: $result + $break + if($pre, if($level > 1, $indent, ""), " ") + "]";

	@return quote($result);
}