@import "@Themes/constants.scss";

@keyframes growWidth {
	0% {
		width: 100%;
	}

	100% {
		width: 200%;
	}
}

.root {
	.content {
		display: flex;
		overflow: hidden;
		height: calc(100vh - 83px);

		.overlay {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: var(--white);
			opacity: 0.5;
			z-index: 2;
			transition: all 0.3s $custom-easing;
		}

		.left-side {
			background-color: $white;
			z-index: 3;
			display: flex;
			width: 389px;
			min-width: 389px;
			transition: all 0.3s $custom-easing;
			overflow: hidden;

			@media (max-width: ($screen-m - 1px)) {
				width: 83px;
				min-width: 83px;
				transform: translateX(-389px);

				&.opened {
					transform: translateX(0px);
					width: 389px;
					min-width: 389px;
				}
			}
		}

		.closable-left-side {
			position: absolute;
			background-color: $white;
			z-index: 0;
			display: flex;
			justify-content: center;
			min-width: 83px;
			max-width: 83px;
			height: calc(100vh - 83px);
			border-right: 1px $grey-medium solid;

			@media (min-width: $screen-m) {
				display: none;
			}

			.chevron-icon {
				margin-top: 21px;
				transform: rotate(180deg);
				cursor: pointer;
			}
		}

		.right-side {
			min-width: calc(100vw - 83px);
			padding: 64px 48px;
			overflow-y: auto;
		}
	}
}