@import (reference) "../App/common.less";

#configurator {
	height: 100%;
	width: 100%;
	display: flex;
	overflow: hidden;

	.pagetransition();

	& > .screen {
		display: flex;
		flex-direction: column;
		flex-grow: 1;

		/**
		 * This is needed to allow the appearance animation
		 * of the absolute-positioned option bar
		 */
		position: relative;

		/**
		 * This is needed to avoid bottom bar appearance to
		 * make the page scrollable
		 */
		overflow: hidden;
	}

	& > .config-panel {
		display: flex;
		background-color: #1c1c1c;
		flex-shrink: 0;
		overflow: hidden;
		animation-duration: 0.8s;
		animation-fill-mode: forwards;
		animation-delay: 1s;
		animation-timing-function: ease-in-out;
		box-shadow: -3px 0 10px #2b2b2b;

		@media screen and (min-width: 550px) {
			width: 0px;
			animation-name: open-menu-norm;

			@keyframes open-menu-norm {
				to {
					width: 300px;
				}
			}
		}

		@media screen and (max-width: 550px) {
			width: 300px;
			right: -300px;
			position: absolute;
			top: 0;
			bottom: 0;
			animation-name: open-menu-sm;

			@keyframes open-menu-sm {
				to {
					right: 0;
				}
			}
		}

		@media screen and (max-width: 300px) {
			max-width: 100%;
		}
	}
}
