@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(--color-generic-white);
			opacity: 0.5;
			z-index: 2;
			transition: all 0.3s $custom-easing;
		}

		.left-side {
			background-color: var(--color-generic-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: 56px;
				min-width: 56px;
				transform: translateX(-389px);

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

			@media (max-width: $screen-s) {
				width: 0px;
				min-width: 0px;

				&.opened {
					width: 100vw;
					min-width: 100vw;
				}
			}
		}

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

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

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

			@media (max-width: $screen-s) {
				display: none;
			}
		}

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

			@media (max-width: ($screen-m - 1px)) {
				min-width: calc(100vw - 56px);
			}

			@media (max-width: $screen-s) {
				padding: 40px 16px 64px 16px;
				flex: 1;
				min-width: unset;
			}

			.back-arrow-mobile {
				display: none;
				@media (max-width: $screen-s) {
					display: block;
					margin-bottom: 24px;
				}
			}

			.back-arrow-desktop {
				@media (max-width: $screen-s) {
					display: none;
				}
			}
		}
	}
}