/*
	Elements:
*/

#MinigameDualBagging {

	background-color: rgba(0,0,0,0.5);
	& .safearea {
		background-image: url('../images/minigames/market-backdrop.png');
		background-position: center;
		isolation: isolate;
	}
	
	& .game-area {
		overflow: hidden;
		position: relative;
	}
	
	
	& .bag-layer {
		position: absolute;
		width: 374px;
		height: 415px;
		bottom: -400px;
		opacity: 0;
		transition: opacity 0.5s ease, bottom 0.5s ease;
		&[state="ready"] {
			bottom: 0px;
			opacity: 1;
		}
		&.bag-back {
			background-image:
				url('../images/minigames/BAGGING-BAG-BACK.png');
		}
		&.bag-front {
			background-image:
				url('../images/minigames/BAGGING-BAG-FRONT.png');
		}
		&.left-bag {
			left: -45px;
		}
		&.right-bag {
			right: -45px;
		}
		
		&.bag-contents {
			padding: 70px 80px 30px 80px;
			font-size: 20px;
			display: flex;
			align-items: stretch;
			justify-content: stretch;
			
			& .bag-contents-listing {
				background-color: rgba(255,255,255,0.6);
				border-radius: 20px;
				padding: 10px;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			
			& p {
				text-align: center;
				font-weight: bold;
				font-size: 20px;
				color: black;
			}
			
			& .bagging-grid {
				width: 100%;
				display: grid;
				grid-template-columns: 80px 1fr;
				align-items: center;
				justify-items: start;
				font-weight: bold;
				
				& img {
					width: 80px;
					height: 80px;
				}
			}
		}
		
	}
	
	& .food {
		position: absolute;
		left: calc( 50% - 133px);
		top: 150px;
		width: 265px;
		height: 265px;
		background-image:
			url('../images/minigames/BAGGING-ITEM-FRUITSALAD.png');
		&[type="AVOCADO"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-AVOCADO.png');
		}
		&[type="BEEF"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-BEEF.png');
		}
		&[type="BISCUIT"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-BISCUIT.png');
		}
		&[type="CANTALOUPE"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-CANTALOUPE.png');
		}
		&[type="CHICKEN"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-CHICKEN.png');
		}
		&[type="CHIPS"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-CHIPS.png');
		}
		&[type="CREAMPUFF"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-CREAMPUFF.png');
		}
		&[type="EGGS"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-EGGS.png');
		}
		&[type="FRUITSALAD"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-FRUITSALAD.png');
		}
		&[type="GREENS"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-GREENS.png');
		}
		&[type="GUACAMOLE"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-GUACAMOLE.png');
		}
		&[type="HONEY"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-HONEY.png');
		}
		&[type="JAM"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-JAM.png');
		}
		&[type="KOMBUCHA"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-KOMBUCHA.png');
		}
		&[type="MUFFIN"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-MUFFIN.png');
		}
		&[type="PORK"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-PORK.png');
		}
		&[type="SALSA"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-SALSA.png');
		}
		&[type="STRAWBERRIES"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-STRAWBERRIES.png');
		}
		&[type="TOMATOES"] {
			background-image:
			url('../images/minigames/BAGGING-ITEM-TOMATOES.png');
		}
	}
	
	& .food {
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
		animation-name: BAGGING-waiting;
		&[state="ondeck"] {
			animation-duration: 0.75s;
			animation-name: BAGGING-arrive-in;
		}
		&[state="left"] {
			animation-duration: 0.75s;
			animation-name: BAGGING-drop-left;
		}
		&[state="right"] {
			animation-duration: 0.75s;
			animation-name: BAGGING-drop-right;
		}
	}
	
	/*
		<div class="bag-back bag-layer left-bag">
		</div>
		<div class="bag-back bag-layer right-bag">
		</div>
	*/
	
	& .prompt {
		background-color: black;
		position: absolute;
		left: 20px;
		right: 20px;
		top: 60px;
		color: white;
		padding: 20px;
		border-radius: 20px;
		font-weight: bold;
		font-size: 24px;
		text-align: center;
		transition: opacity 0.5s ease;
	}

}

@keyframes BAGGING-waiting {
	0% {
		transform: translate( 0px, -400px );
		opacity: 0;
	}
	100% {
		transform: translate( 0px, -400px );
		opacity: 0;
	}
}

@keyframes BAGGING-arrive-in {
	0% {
		transform: translate( 0px, -400px );
		opacity: 0;
	}
	100% {
		transform: translate( 0px, 0px );
		opacity: 1;
	}
}

@keyframes BAGGING-drop-left {
	0% {
		transform: translate( 0px, 0px );
	}
	40% {
		transform: translate( -110px, 20px );
	}
	50% {
		transform: translate( -130px, 40px );
	}
	99% { opacity: 1; }
	100% {
		transform: translate( -130px, 400px );
		opacity: 0;
	}
}

@keyframes BAGGING-drop-right {
	0% {
		transform: translate( 0px, 0px );
	}
	40% {
		transform: translate( 110px, 20px );
	}
	50% {
		transform: translate( 130px, 40px );
	}
	99% { opacity: 1; }
	100% {
		transform: translate( 130px, 400px );
		opacity: 0;
	}
}