/*
	Elements:
	<div id="bag-back"></div>
	<div id="bag-item"></div>
	<div id="bag-front"></div>
	
	States:
	start, openA, openB, openC, done
	
	They are inside a 450x960 #PAPER-BAG.mini-game container.
	
	Paper bag image is 374x415. Food items are 265x265.

*/

#MinigameBagging {
	background-color: rgba(0,0,0,0.5);
	& .safearea {
		background-image: url('../images/minigames/market-backdrop.png');
		background-position: center;
		isolation: isolate;
	}
	& .bagging-area {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	
	& .add-this {
		color: white;
		font-size: 30px;
		font-weight: bold;
		position: absolute;
		left: 35px;
		right: 35px;
		bottom: 560px;
		background-color: rgba(0,0,0,0.7);
		padding: 15px;
		text-align: center;
		border-radius: 10px;
		opacity: 0;
		transition: opacity 0.5s ease;
		
		&.shown { opacity: 1.0; }
	}
	
	/*
		Layers are used for z-positioning elements of the bags
		since the bag back and bag front have to be on opposite
		sides of the food, but they have to be animated separately
		from the food, so they cannot be their own node tree.
	*/
	& .layer {
		postion: absolute;
		display: none;
		left: 0px;
		top: 0px;
		width: 0px;
		height: 0px;
	}
	
	& .bag-back,
	& .bag-front,
	& .bag-frame {
		transition: transform 0.5s ease;
		transform: translateX( 500px );
		&[position="ondeck"] {
			transform: translateX( 0px );
		}
		&[position="discarded"] {
			transform: translateX( -550px );
		}
		&.rejected {
			animation-duration: 0.5s;
			animation-name: BAGGING-rejected;
		}
	}

	/*	A grocery bag */
	& .bag-back,
	& .bag-front {
		position: absolute;
		top: 550px;
		left: calc( 50% - 187px );
		width: 374px;
		height: 415px;
		background-size:100%;
		background-repeat: no-repeat;
		background-position: center;
		&.bag-back {
			background-image:
				url( "../images/minigames/BAGGING-BAG-BACK.png" );
		}
		&.bag-front {
			background-image:
				url( "../images/minigames/BAGGING-BAG-FRONT.png" );
		}
	}
	
	& .food {
		width: 265px;
		height: 265px;
		position: absolute;
		left: calc( 50% - 134px );
		top: 340px;
		transition: top 0.5s ease;
		
		&[product="AVOCADO"] {
				background-image:
					url("../images/minigames/BAGGING-ITEM-AVOCADO.png");
		}
		&[product="BEEF"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-BEEF.png");
		}
		&[product="BISCUIT"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-BISCUIT.png");
		}
		&[product="CANTALOUPE"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-CANTALOUPE.png");
		}
		&[product="CHICKEN"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-CHICKEN.png");
		}
		&[product="CHIPS"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-CHIPS.png");
		}
		&[product="CREAMPUFF"] {
				background-image:
				url("../images/minigames/BAGGING-ITEM-CREAMPUFF.png");
		}
		&[product="EGGS"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-EGGS.png");
		}
		&[product="FRUITSALAD"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-FRUITSALAD.png");
		}
		&[product="GREENS"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-GREENS.png");
		}
		&[product="GUACAMOLE"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-GUACAMOLE.png");
		}
		&[product="HONEY"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-HONEY.png");
		}
		&[product="JAM"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-JAM.png");
		}
		&[product="KOMBUCHA"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-KOMBUCHA.png");
		}
		&[product="MUFFIN"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-MUFFIN.png");
		}
		&[product="PORK"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-PORK.png");
		}
		&[product="SALSA"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-SALSA.png");
		}
		&[product="STRAWBERRIES"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-STRAWBERRIES.png");
		}
		&[product="TOMATOES"] {
			background-image:
				url("../images/minigames/BAGGING-ITEM-TOMATOES.png");
		}		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-name: BAGGING-food-arrives;
		
		&[position="dropped"] {
			animation-duration: 1.0s;
			animation-name: BAGGING-put-food-in-bag;
		}
	}

	.bagging-frame-old {
		width: 525px;
		height: 300px;
		position: absolute;
		top: 40px;
		left: calc( 50% - 263px );
		background-image:
			url( "../images/minigames/BAGGING-FRAME.png" );
		
		& .prompt {
			position: absolute;
			left: 50px;
			top: 50px;
			right: 55px;
			height: 70px;
			color: black;
			display: grid;
			align-items: center;
			justify-items: center;
			font-weight: bold;
			font-size: 40px;
		}
		
		.bagging-item {
			position: absolute;
			width: 113px;
			height: 113px;
			left: 30px;
			bottom: 28px;
			
			background-image:
				url("../images/minigames/BAGGING-ICON-AVOCADO.png");
			
			&#bagging-2 { left: 148px; }
			&#bagging-3 { left: 266px; }
			&#bagging-4 { left: 383px; }
		}
	}
	
	.bag-frame {
		width: 500px;
		height: 215px;
		position: absolute;
		top: 40px;
		left: calc( 50% - 250px );
		background-image:
			url( "../images/minigames/BAGGING-CONTENTS.png" );
		
		& .prompt {
			position: absolute;
			left: 20px;
			top: 25px;
			right: 20px;
			color: black;
			display: grid;
			align-items: center;
			justify-items: center;
			font-weight: bold;
			font-size: 40px;
		}
		& .contents {
			position: absolute;
			left: 20px;
			right: 20px;
			bottom: 25px;
			height: 113px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 1s ease;
		}
		
		& .bagging-item {
			max-width: 113px;
			height: 113px;
			left: 30px;
			bottom: 28px;
			width:0;
			transition: all 0.5s ease;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-name: BAGGING-added;
		}
		& .bagging-item[item="AVOCADO"] {
				background-image:
					url("../images/minigames/BAGGING-ICON-AVOCADO.png");
		}
		& .bagging-item[item="BEEF"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-BEEF.png");
		}
		& .bagging-item[item="BISCUIT"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-BISCUIT.png");
		}
		& .bagging-item[item="CANTALOUPE"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-CANTALOUPE.png");
		}
		& .bagging-item[item="CHICKEN"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-CHICKEN.png");
		}
		& .bagging-item[item="CHIPS"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-CHIPS.png");
		}
		& .bagging-item[item="CREAMPUFF"] {
				background-image:
				url("../images/minigames/BAGGING-ICON-CREAMPUFF.png");
		}
		& .bagging-item[item="EGGS"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-EGGS.png");
		}
		& .bagging-item[item="FRUITSALAD"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-FRUITSALAD.png");
		}
		& .bagging-item[item="GREENS"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-GREENS.png");
		}
		& .bagging-item[item="GUACAMOLE"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-GUACAMOLE.png");
		}
		& .bagging-item[item="HONEY"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-HONEY.png");
		}
		& .bagging-item[item="JAM"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-JAM.png");
		}
		& .bagging-item[item="KOMBUCHA"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-KOMBUCHA.png");
		}
		& .bagging-item[item="MUFFIN"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-MUFFIN.png");
		}
		& .bagging-item[item="PORK"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-PORK.png");
		}
		& .bagging-item[item="SALSA"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-SALSA.png");
		}
		& .bagging-item[item="STRAWBERRIES"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-STRAWBERRIES.png");
		}
		& .bagging-item[item="TOMATOES"] {
			background-image:
				url("../images/minigames/BAGGING-ICON-TOMATOES.png");
		}
	}
	& .bag-button {
		color: black;
		font-weight: bold;
		font-size: 22px;
		position: absolute;
		width: 250px;
		height: 175px;
		bottom: 20px;
		text-align: center;
		display: grid;
		align-items: center;
		justify-items: center;
		padding: 75px 30px 30px 30px;
		
		&:active {
			transform: translate( 0px, 4px );
		}
		
		&#drop-button {
			left: 20px;
			background-image: url( 
				"../images/minigames/BAGGING-BUTTON-SAME.png" );
		}
		
		&#new-button {
			right: 20px;
			background-image: url( 
				"../images/minigames/BAGGING-BUTTON-NEW.png" );
		}
	}
	
	& .empty-message {
		font-size: 30px;
	}
	
}

@keyframes BAGGING-added {
	0% {
		flex-grow: 0;
		opacity: 0;
		width: 0px;
	}
	80% {
		flex-grow: 1;
		width: inherit;
	}
	100% {
		flex-grow: 1;
		width: inherit;
		opacity: 1;
	}
}


@keyframes BAGGING-food-arrives {
	0% {
		left: -300px;
		top: 340px;
	}
	100% {
		left: calc( 50% - 134px );
		top: 340px;
	}
}
@keyframes BAGGING-put-food-in-bag {
	0% {
		top: 340px;
	}
	33% {
		top: 270px;
	}
	99% {
		opacity: 1.0;
	}
	100% {
		opacity: 0;
		top: 650px;
	}
}

@keyframes BAGGING-rejected-old {
	0% { transform: rotate( 0deg ); }
	10% { transform: rotate( -4deg ); }
	20% { transform: rotate( 4deg ); }
	30% { transform: rotate( -4deg ); }
	40% { transform: rotate( 4deg ); }
	50% { transform: rotate( -4deg ); }
	60% { transform: rotate( 4deg ); }
	70% { transform: rotate( -4deg ); }
	80% { transform: rotate( 4deg ); }
	90% { transform: rotate( -4deg ); }
	100% { transform: rotate( 0deg ); }
}

@keyframes BAGGING-rejected {
	0% { transform: translateX( 0px ); }
	10% { transform: translateX( 10px ); }
	20% { transform: translateX( -10px ); }
	30% { transform: translateX( 10px ); }
	40% { transform: translateX( -10px ); }
	50% { transform: translateX( 10px ); }
	60% { transform: translateX( -10px ); }
	70% { transform: translateX( 10px ); }
	80% { transform: translateX( -10px ); }
	90% { transform: translateX( 10px ); }
	100% { transform: translateX( 0px ); }
}