// Gets the value of a key in a submap in a map
@function map-get-inner($map, $submap, $key){
	@return map-get(map-get($map, $submap),$key);
}
// Checks if the submap of a map has the specified key
@function map-has-inner-key($map, $submap, $key){
	@if map-has-key($map, $submap){
		@if map-has-key(map-get($map, $submap), $key) {
			@return true;
		}
	}
	@return false;
}
// Main mocka mixin
@mixin mocka($mocka) {
	// Set variable defaults
	$_prefix: 'mocka' !default;
	$_container: 'container' !default;
	$_media: 'media' !default;
	$_heading: 'heading' !default;
	$_text: 'text' !default;
	$_animation: 'dot' !default;
	$_background: #c9c9c9 !default;

	$_container-width: 20rem !default;
	$_container-height: 9.5rem !default;
	$_container-background: #fafafa !default;
	$_container-border-radius: 0.125rem !default;
	$_container-border: 0.0625rem solid #acacac !default;

	$_media-top: 0.5rem !default;
	$_media-left: 0.5rem !default;
	$_media-width: 4rem !default;
	$_media-height: 4rem !default;
	$_media-border-radius: 0 !default;

	$_heading-top: 1.125rem !default;
	$_heading-left: 5rem !default;
	$_heading-width-base: 100% !default;
	$_heading-width-offset: 1rem !default;
	$_heading-height: 0.875rem !default;
	$_heading-border-radius: 0 !default;
	$_subheading-top: 1.5rem !default;
	$_subheading-width: 85% !default;
	$_subheading-height: 0.875rem !default;
	$_subheading-border-radius: 0 !default;

	$_text-top: 5.25rem !default;
	$_text-left: 0.5rem !default;
	$_text-line1-width-base: 85% !default;
	$_text-line1-width-offset: 1rem !default;
	$_text-height: 0.75rem !default;
	$_text-line2-top: 1.25rem !default;
	$_text-line2-width-base: 120% !default;
	$_text-line2-width-offset: 1rem !default;
	$_text-line3-top: 2.5rem !default;
	$_text-line3-width-base: 90% !default;
	$_text-line3-width-offset:0 !default;
	$_text-border-radius: 0 !default;

	$_dots-top: 2rem !default;
	$_dots-height: 0.5rem !default;
	$_dots-width: 0.5rem !default;
	$_dots-space-around: 0.75rem !default;
	$_dots-space-between: 0.5rem !default;
	$_dots-border-radius: 1rem !default;
	$_dots-background: #7a7a7a !default;

	$_animation_name: 'dot' !default;
	$_animation-duration: 1.8s !default;
	$_animation-timing-function: ease !default;
	$_animation-iteration-count: infinite !default;
	$_animation_dot1-y-offset: -0.3125rem !default;
	$_animation_dot2-y-offset: -0.4375rem !default;
	$_animation_dot3-y-offset: -0.3125rem !default;

	// Update variables based on the map provided
	@if map-has-key($mocka, prefix){
		$_prefix: map-get($mocka, prefix);
	}
	@if map-has-inner-key($mocka, container, name){
		$_container: map-get-inner($mocka, container, name);
	}
	@if map-has-inner-key($mocka, media, name){
		$_media: map-get-inner($mocka, media, name);
	}
	@if map-has-inner-key($mocka, heading, name){
		$_heading: map-get-inner($mocka, heading, name);
	}
	@if map-has-inner-key($mocka, text, name){
		$_text: map-get-inner($mocka, text, name);
	}
	@if map-has-inner-key($mocka, animation, name){
		$_animation: map-get-inner($mocka, animation, name);
	}
	@if map-has-key($mocka, background){
		$_background: map-get($mocka, background);
	}

	@if map-has-inner-key($mocka, container, width){
		$_container-width: map-get-inner($mocka, container, width);
	}
	@if map-has-inner-key($mocka, container, height){
		$_container-height: map-get-inner($mocka, container, height);
	}
	@if map-has-inner-key($mocka, container, background){
		$_container-background: map-get-inner($mocka, container, background);
	}
	@if map-has-inner-key($mocka, container, border-radius){
		$_container-border-radius: map-get-inner($mocka, container, border-radius);
	}
	@if map-has-inner-key($mocka, container, border){
		$_container-border: map-get-inner($mocka, container, border);
	}

	@if map-has-inner-key($mocka, media, top){
		$_media-top: map-get-inner($mocka, media, top);
	}
	@if map-has-inner-key($mocka, media, left){
		$_media-left: map-get-inner($mocka, media, left);
	}
	@if map-has-inner-key($mocka, media, width){
		$_media-width: map-get-inner($mocka, media, width);
	}
	@if map-has-inner-key($mocka, media, height){
		$_media-height: map-get-inner($mocka, media, height);
	}
	@if map-has-inner-key($mocka, media, border-radius){
		$_media-border-radius: map-get-inner($mocka, media, border-radius);
	}

	@if map-has-inner-key($mocka, heading, top){
		$_heading-top: map-get-inner($mocka, heading, top);
	}
	@if map-has-inner-key($mocka, heading, left){
		$_heading-left: map-get-inner($mocka, heading, left);
	}
	@if map-has-inner-key($mocka, heading, width-base){
		$_heading-width-base: map-get-inner($mocka, heading, width-base);
	}
	@if map-has-inner-key($mocka, heading, width-offset){
		$_heading-width-offset: map-get-inner($mocka, heading, width-offset);
	}
	@if map-has-inner-key($mocka, heading, height){
		$_heading-height: map-get-inner($mocka, heading, height);
	}
	@if map-has-inner-key($mocka, heading, border-radius){
		$_heading-border-radius: map-get-inner($mocka, heading, border-radius);
	}
	@if map-has-inner-key($mocka, subheading, top){
		$_subheading-left: map-get-inner($mocka, subheading, top);
	}
	@if map-has-inner-key($mocka, subheading, width){
		$_subheading-width: map-get-inner($mocka, subheading, width);
	}
	@if map-has-inner-key($mocka, subheading, height){
		$_subheading-height: map-get-inner($mocka, subheading, height);
	}
	@if map-has-inner-key($mocka, subheading, border-radius){
		$_subheading-border-radius: map-get-inner($mocka, subheading, border-radius);
	}

	@if map-has-inner-key($mocka, text, top){
		$_text-top: map-get-inner($mocka, text, top);
	}
	@if map-has-inner-key($mocka, text, left){
		$_text-left: map-get-inner($mocka, text, left);
	}
	@if map-has-inner-key($mocka, text, line1-width-base){
		$_text-line1-width-base: map-get-inner($mocka, text, line1-width-base);
	}
	@if map-has-inner-key($mocka, text, line1-width-offset){
		$_text-line1-width-offset: map-get-inner($mocka, text, line1-width-offset);
	}
	@if map-has-inner-key($mocka, text, height){
		$_text-height: map-get-inner($mocka, text, height);
	}
	@if map-has-inner-key($mocka, text, line2-top){
		$_text-line2-top: map-get-inner($mocka, text, line2-top);
	}
	@if map-has-inner-key($mocka, text, line2-width-base){
		$_text-line2-width-base: map-get-inner($mocka, text, line2-width-base);
	}
	@if map-has-inner-key($mocka, text, line2-width-offset){
		$_text-line2-width-offset: map-get-inner($mocka, text, line2-width-offset);
	}
	@if map-has-inner-key($mocka, text, line3-top){
		$_text-line3-top: map-get-inner($mocka, text, line3-top);
	}
	@if map-has-inner-key($mocka, text, line3-width-base){
		$_text-line3-width-base: map-get-inner($mocka, text, line3-width-base);
	}
	@if map-has-inner-key($mocka, text, line3-width-offset){
		$_text-line3-width-offset: map-get-inner($mocka, text, line3-width-offset);
	}
	@if map-has-inner-key($mocka, text, border-radius){
		$_text-border-radius: map-get-inner($mocka, text, border-radius);
	}

	@if map-has-inner-key($mocka, dots, top){
		$_dots-top: map-get-inner($mocka, dots, top);
	}
	@if map-has-inner-key($mocka, dots, height){
		$_dots-height: map-get-inner($mocka, dots, height);
	}
	@if map-has-inner-key($mocka, dots, width){
		$_dots-width: map-get-inner($mocka, dots, width);
	}
	@if map-has-inner-key($mocka, dots, space-around){
		$_dots-space-around: map-get-inner($mocka, dots, space-around);
	}
	@if map-has-inner-key($mocka, dots, space-between){
		$_dots-space-between: map-get-inner($mocka, dots, space-between);
	}
	@if map-has-inner-key($mocka, dots, border-radius){
		$_dots-border-radius: map-get-inner($mocka, dots, border-radius);
	}
	@if map-has-inner-key($mocka, dots, background){
		$_dots-background: map-get-inner($mocka, dots, background);
	}

	@if map-has-inner-key($mocka, animation, duration){
		$_animation-duration: map-get-inner($mocka, animation, duration);
	}
	@if map-has-inner-key($mocka, animation, timing-function){
		$_animation-timing-function: map-get-inner($mocka, animation, timing-function);
	}
	@if map-has-inner-key($mocka, animation, iteration-count){
		$_animation-iteration-count: map-get-inner($mocka, animation, iteration-count);
	}
	@if map-has-inner-key($mocka, animation, dot1-y-offset){
		$_animation-dot1-y-offset: map-get-inner($mocka, animation, dot1-y-offset);
	}
	@if map-has-inner-key($mocka, animation, dot2-y-offset){
		$_animation-dot2-y-offset: map-get-inner($mocka, animation, dot2-y-offset);
	}
	@if map-has-inner-key($mocka, animation, dot3-y-offset){
		$_animation-dot3-y-offset: map-get-inner($mocka, animation, dot3-y-offset);
	}

	// Create animations for the loading dots
	@-webkit-keyframes #{$_prefix}-#{$_animation}-a {
	  8% 	{	-webkit-transform: translateY(0); }
	  22% {	-webkit-transform: translateY($_animation-dot1-y-offset); }
	  36% {	-webkit-transform: translateY(0); }
	}

	@keyframes #{$_prefix}-#{$_animation}-a {
	  8% 	{					transform: translateY(0); }
	  22%	{ 				transform: translateY($_animation-dot1-y-offset); }
	  36% {					transform: translateY(0); }
	}

	@-webkit-keyframes #{$_prefix}-#{$_animation}-b {
	  36% {	-webkit-transform: translateY(0); }
	  50% {	-webkit-transform: translateY($_animation-dot2-y-offset); }
	  64% {	-webkit-transform: translateY(0); }
	}

	@keyframes #{$_prefix}-#{$_animation}-b {
	  36% {					transform: translateY(0); }
	  50% {					transform: translateY($_animation-dot2-y-offset); }
	  64% {					transform: translateY(0); }
	}

	@-webkit-keyframes #{$_prefix}-#{$_animation}-c {
	  64% {	-webkit-transform: translateY(0); }
	  78% {	-webkit-transform: translateY($_animation-dot3-y-offset); }
	  92% {	-webkit-transform: translateY(0); }
	}

	@keyframes #{$_prefix}-#{$_animation}-c {
	  64% {					transform: translateY(0); }
	  78% {					transform: translateY($_animation-dot3-y-offset); }
	  92% {					transform: translateY(0); }
	}

	// Create styles for all the required parts of mocka
	.#{$_prefix}-#{$_container} {
		position: relative;
		width: $_container-width;
		height: $_container-height;
		@if $_container-background != transparent {
			background: $_container-background;
		}
		@if $_container-border-radius != 0 {
			border-radius: $_container-border-radius;
		}
		@if $_container-border != 0 {
			border: $_container-border;
		}
	}

	.#{$_prefix}-#{$_media}, .#{$_prefix}-#{$_heading}, .#{$_prefix}-#{$_text} {
		&, &:before, &:after {
			position: absolute;
		  background: $_background;
		}
	}

	.#{$_prefix}-#{$_media} {
		@if $_media-top != 0 {
			top: $_media-top;
		}
		@if $_media-left != 0 {
			left: $_media-left;
		}
		width: $_media-width;
		height: $_media-height;
		@if $_media-border-radius != 0 {
			border-radius: $_media-border-radius;
		}
		&:before, &:after {
			@if $_dots-top != 0 {
				top: $_dots-top;
			}
			width: $_dots-width;
			height: $_dots-height;
			@if $_dots-border-radius != 0 {
				border-radius: $_dots-border-radius;
			}
			background: $_dots-background;
			content: '';
		}
		&:before {
			left: $_dots-space-around;
			-webkit-animation: #{$_prefix}-#{$_animation}-a #{$_animation_duration} #{$_animation-timing-function} #{$_animation-iteration-count};
			animation: #{$_prefix}-#{$_animation}-a #{$_animation_duration} #{$_animation-timing-function} #{$_animation-iteration-count};
		}
		&:after {
			left: $_dots-space-around + $_dots-width + $_dots-space-between;
			-webkit-animation: #{$_prefix}-#{$_animation}-b #{$_animation_duration} #{$_animation-timing-function} #{$_animation-iteration-count};
			animation: #{$_prefix}-#{$_animation}-b #{$_animation_duration} #{$_animation-timing-function} #{$_animation-iteration-count};
		}
	}
	.#{$_prefix}-#{$_heading} {
		@if $_heading-top != 0 {
			top: $_heading-top;
		}
		@if $_heading-top != 0 {
			left: $_heading-left;
		}
		@if $_heading-width-offset != 0 {
			width: calc(#{$_heading-width-base} - #{$_heading-width-offset});
		}
		@else {
			width: $_heading-width-base;
		}
		@if $_heading-height == $_subheading-height and $_heading-border-radius == $_subheading-border-radius {
			&, &:before {
				height: $_heading-height;
				@if $_heading-border-radius != 0 {
					border-radius: $_heading-border-radius;
				}
			}
		}
		@else if $_heading-height == $_subheading-height {
			@if $_heading-border-radius != 0 {
				border-radius: $_heading-border-radius;
			}
			&, &:before {
				height: $_heading-height;
			}
			&:before {
				@if $_subheading-border-radius != 0 {
					border-radius: $_subheading-border-radius;
				}
			}
		}
		@else if $_heading-border-radius == $_subheading-border-radius {
			height: $_heading-height;
			&, &:before {
				@if $_heading-border-radius != 0 {
					border-radius: $_heading-border-radius;
				}
			}
			&:before {
				height: $_subheading-height;
			}
		}
		@else {
			height: $_heading-height;
			@if $_heading-border-radius != 0 {
				border-radius: $_heading-border-radius;
			}
			&:before {
				height: $_subheading-height;
				@if $_sub-heading-border-radius != 0 {
					border-radius: $_sub-heading-border-radius;
				}
			}
		}
		&:before, &:after {
			content: '';
		}
		&:before {
			@if $_subheading-top != 0 {
				top: $_subheading-top;
			}
			width: $_subheading-width;
		}
		&:after {
			top: $_dots-top + $_media-top - $_heading-top;
	    left: -$_heading-left + $_media-width + $_media-left - $_dots-space-around - $_dots-width;
			width: $_dots-width;
			height: $_dots-height;
			@if $_dots-border-radius != 0 {
				border-radius: $_dots-border-radius;
			}
			background: $_dots-background;
	    -webkit-animation: #{$_prefix}-#{$_animation}-c #{$_animation_duration} #{$_animation-timing-function} #{$_animation-iteration-count};
	    animation: #{$_prefix}-#{$_animation}-c #{$_animation_duration} #{$_animation-timing-function} #{$_animation-iteration-count};
		}
	}
	.#{$_prefix}-#{$_text} {
		@if $_text-top != 0 {
			top: $_text-top;
		}
		@if $_text-left != 0 {
			left: $_text-left;
		}
		@if $_text-line1-width-offset != 0 {
			width: calc(#{$_text-line1-width-base} - #{$_text-line1-width-offset});
		}
		@else {
			width: $_text-line1-width-base;
		}
		&, &:before, &:after {
			height: $_text-height;
		}
		&:before, &:after {
			content: '';
		}
		&:before {
			@if $_text-line2-top != 0 {
				top: $_text-line2-top;
			}
			@if $_text-line2-width-offset != 0 {
				width: calc(#{$_text-line2-width-base} - #{$_text-line2-width-offset});
			}
			@else {
				width: $_text-line2-width-base;
			}
		}
		&:after {
			@if $_text-line3-top != 0 {
				top: $_text-line3-top;
			}
			@if $_text-line3-width-offset != 0 {
				width: calc(#{$_text-line3-width-base} - #{$_text-line3-width-offset});
			}
			@else {
				width: $_text-line3-width-base;
			}
		}
	}
}
