@import 'src/Components/GlobalStyles/colors';
@import 'src/Components/GlobalStyles/mixins';

.progressContainer,
.openProgressBarContainer {
	background-color: white;
	width: 400px;
	height: 126px;
	border-radius: 10px;
	position: fixed;
	bottom: 20px;
	left: 78vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	padding: 40px 30px 0 40px;
	transition: all 0.3s ease-in-out;
	transition-delay: 100ms;
	box-shadow: 0 3px 13px 0 $dropShadow;

	.progressBarContext {
		transform: scale(0);
		opacity: 0;
		height: 80%;
		width: 100%;
		margin-bottom: auto;
	}

	.computerSvg {
		transform: scale(0);
		opacity: 0;
		width: 117px;
		margin-left: auto;
	}

	p {
		margin: 0 0 8px;
		font-size: 16px;

		small {
			font-size: 16px;
			color: var(--primary-color);
			font-weight: 800;
		}
	}

	.progressBarBox {
		padding-bottom: 50px;
		position: absolute;
		bottom: 0;
		left: 37px;
		right: 30px;
		z-index: 11;
		background-color: white;
	}

	.arrow {
		text-align: center;
	}

	button {
		display: block;
		width: 50px;
		border-radius: 10px;

		@include positionAbsoluteCenter;

		z-index: 12;

		svg {
			transform: rotateZ(90deg);
		}
	}
}

.openProgressBarContainer {
	height: 805px;

	.progressBarContext {
		transform: scale(1);
		opacity: 1;
	}

	.computerSvg {
		transform: scale(1);
		opacity: 1;
	}

	button {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);

		svg {
			transform: rotateZ(-90deg);
			align-self: start;
			justify-self: start;
		}
	}
}