/*
	Elements:
		<div id="food-1"></div>
		<div id="food-2"></div>
		<div id="food-3"></div>
	
	States:
		start, food1, food2, food3, done
	
	They are inside a 500x960 #COOLER.mini-game container.
*/

.COOLER {

	& #cooler-tap-area {
		position: absolute;
		left: 60px;
		right: 60px;
		top: 70px;
		bottom: 0px;
		background-color: rgba( 255,255,255,0.25 );
		border-radius: 40px 40px 0px 0px;
		&.tab-highlighted {
			outline-color: transparent;
		}
	}

	background-image:
		url('../images/minigames/COOLER-BACK.png');
	background-size: 100%;
	background-repeat: no-repeat;
	
	& .food {
		aspect-ratio:  1 / 1;
		width: 400px;
		height: 400px;
		left: calc( 50% - 200px);
		top: 120%;
		transition: all 0.5s ease;
		background-size:100%;
		&.poised {
			top: 80%;
			transform: scale( 1.2 );
		}
		&.placed {
			transform: scale( 1.0 );
		}
		&#food-1.placed { top: calc( 25% - 200px ); }
		&#food-2.placed { top: calc( 55% - 200px ); }
		&#food-3.placed { top: calc( 85% - 200px ); }
	}
	
	&#COOLER-BEEF-AND-PORK {
		#food-1 {
			background-image:
				url('../images/minigames/COOLER-Beef.png');
		}
		#food-2 {
			background-image:
				url('../images/minigames/COOLER-Beef.png');
		}
		#food-3 {
			background-image:
				url('../images/minigames/COOLER-Pork.png');
		}
	}
	&#COOLER-CHICKEN-AND-EGGS {
		#food-1 {
			background-image:
				url('../images/minigames/COOLER-Chicken.png');
		}
		#food-2 {
			background-image:
				url('../images/minigames/COOLER-Chicken.png');
		}
		#food-3 {
			background-image:
				url('../images/minigames/COOLER-Eggs.png');
		}
	}
	&#COOLER-PUFFS {
		#food-1 {
			background-image:
				url('../images/minigames/COOLER-Creampuffs.png');
		}
		#food-2 {
			background-image:
				url('../images/minigames/COOLER-Creampuffs.png');
		}
		#food-3 {
			background-image:
				url('../images/minigames/COOLER-Creampuffs.png');
		}
	}
	&#COOLER-FRUIT-AND-KOMBUCHA {
		#food-1 {
			background-image:
				url('../images/minigames/COOLER-FruitSalad.png');
		}
		#food-2 {
			background-image:
				url('../images/minigames/COOLER-Kombucha.png');
		}
		#food-3 {
			background-image:
				url('../images/minigames/COOLER-FruitSalad.png');
		}
	}
	&#COOLER-GUACAMOLE {
		#food-1 {
			background-image:
				url('../images/minigames/COOLER-Guacamole.png');
		}
		#food-2 {
			background-image:
				url('../images/minigames/COOLER-Guacamole.png');
		}
		#food-3 {
			background-image:
				url('../images/minigames/COOLER-Guacamole.png');
		}
	}
	&#COOLER-STRAWBERRIES {
		#food-1 {
			background-image:
				url('../images/minigames/COOLER-Strawberries.png');
		}
		#food-2 {
			background-image:
				url('../images/minigames/COOLER-Strawberries.png');
		}
		#food-3 {
			background-image:
				url('../images/minigames/COOLER-Strawberries.png');
		}
	}

}