@import "../../../css/colors.less";

.uiMainMenu {
	display: none;
	background-color: @blackC;
	border: 5px solid @blackB;
	text-align: center;

	> .heading {
		color: @blueA;
		width: 100%;
		height: 36px;
		background-color: @blackB;
		position: relative;

		.heading-text {
			padding-top: 8px;
			margin: auto;
		}

	}

	.options {
		display: flex;
		flex-direction: column;
		padding: 10px;

		.btn {
			color: @white;
			width: 100%;
			height: 35px;
			background-color: @blueC;
			cursor: pointer;
			padding: 0px 20px;

			+ .btn {
				margin-top: 10px;
			}

			&.btnNames {
				display: none;
			}

			&:hover {
				background-color: @blueD;
			}

			&.btn-red {
				background-color: @redC;

				&:hover {
					background-color: @redD;
				}

			}

			&.btn-orange {
				background-color: @orangeC;

				&:hover {
					background-color: @orangeD;
				}

			}

		}

		.btnIssue {
			background-color: @redC;

			&:hover {
				background-color: @redD;
			}

		}

	}

}

.mobile .uiMainMenu {
	.btnScreen {
		display: none;
	}

	.btnNames {
		display: block;
	}

}
