@import '../../../style/mixins.scss';

.menu {
	position: fixed;
	left: 0;
	top: 60px;
	bottom: 0;
	width: 400px;
	background-color: #ffffff;
	padding: 20px 0;
	box-shadow: 3px 0 3px #00000010;
	z-index: 999;

	@include tablet {
		overflow: hidden;
		width: 0;
		transition: width 0.3s ease-out;

		&_open {
			width: 400px;
		}
	}

	@include mobile {
		display: none;
		position: unset;
		left: unset;
		top: unset;
		bottom: unset;
		width: 100%;
		box-shadow: unset;
		z-index: unset;

		&_asChild {
			display: block;
		}
	}

	&_hamburger {
		display: none;

		@include tablet {
			display: block;
			position: absolute;
			cursor: pointer;
			top: 80px;
			left: 20px;
			background: url('../../../res/hamburger.png') center center;
			background-size: contain;
			width: 40px;
			height: 40px;

			&_open {
				display: none;
			}
		}
	}

	&_closeMenu {
		display: none;

		@include tablet {
			display: block;
			cursor: pointer;
			background: url('../../../res/back.png') center center;
			background-size: contain;
			width: 40px;
			height: 40px;
			margin-left: 320px;
			margin-bottom: 20px;
		}
	}

	&_item {
		padding: 20px 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		cursor: pointer;
		width: 400px;

		@include mobile {
			width: 100%;
			height: 30px;
			padding: 10px 0;
		}

		&:hover {
			background-color: #0072bc10;
		}

		&_image {
			width: 50px;
			margin-right: 20px;

			@include mobile {
				width: 30px;
			}
		}

		&_text {
			font-size: 26px;
			line-height: 35px;
			color: #0072bc;
		}
	}
}
