@import "/UI/Style.scss";

GameBar {
	position: absolute;
	top: 50px;
	flex-direction: column;
	font-family: $font-main;
	color: $white;
	width: 700px;

	.top-stage {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 40;
		color: $white;
		background-color: $gray;
		z-index: 2;
		transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
		margin-bottom: 10px;

		&:intro {
			opacity: 0;
			transform: scale(0);
		}
	}

	.top {
		flex-direction: row;
		height: 60px;
		flex-wrap: wrap;
		background-color: $gray-darker;
		z-index: 2;

		.padding {
			flex-grow: 1;
			height: 100%;
			background-color: $gray-darker;
			width: 250px;
			padding: 0px 20px;
			align-items: center;
		}

		.timer {
			width: 150px;
			height: 100%;
			justify-content: center;
			align-items: center;
			background-color: $gray-brighter;
			font-size: 36px;
		}
	}

	>ScoreBar {
		transition: opacity 0.2s ease-in-out;
		opacity: 1;

		&.hidden {
			opacity: 0;
		}
	}

	.notification-container {
		width: 100%;
		flex-direction: column;

		.notification {
			justify-content: center;
			align-items: center;
			padding: 5px 10px;
			transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
			text-transform: uppercase;
			font-size: 28px;
			width: 100%;

			&:intro {
				transform: translateY(100%);
				opacity: 0;
			}

			&:outro {
				transform: translateY(-100%);
				opacity: 0;
			}
		}
	}
}