@import "../../../css/colors.less";
@pad: 8px;
@btnSize: 64px;

.uiMenu {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: ((@btnSize * 4) + (@pad * 10));
	height: ((@btnSize * 2) + (@pad * 2));
	padding: @pad;
	background-color: fade(@darkGray, 90%);

	[class^="btn"] {
		width: @btnSize;
		height: @btnSize;
		float: left;
		margin: 0px @pad;
		float: left;
		cursor: pointer;
		position: relative;

		&:hover {
			background-color: fade(@white, 10%);
		}

		.icon {
			pointer-events: none;
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
		}

		&.btnCollapse {
			display: none;
		}

		&.btnInventory .icon {
			background: url('../../../images/uiIcons.png') 0px 0px;
		}

		&.btnEquipment .icon {
			background: url('../../../images/uiIcons.png') -192px 0px;
		}

		&.btnSmithing .icon {
			background: url('../../../images/uiIcons.png') -128px -64px;
		}

		&.btnPassives {
			position: relative;

			.points {
				width: 100%;
				text-align: center;
				left: 0px;
				bottom: 23px;
				position: absolute;
				color: @white;
				filter: drop-shadow(0px -2px 0px @blackD) 
				drop-shadow(0px 2px 0px @blackD)
				drop-shadow(2px 0px 0px @blackD) 
				drop-shadow(-2px 0px 0px @blackD);
			}

		}

		&.btnPassives .icon {
			background: url('../../../images/uiIcons.png') -320px -64px;
		}

		&.btnOnline .icon {
			background: url('../../../images/uiIcons.png') -64px 0px;
		}

		&.btnHelp .icon {
			background: url('../../../images/uiIcons.png') -128px 0px;
		}

		&.btnLeaderboard .icon {
			background: url('../../../images/uiIcons.png') -256px 0px;
		}

		&.btnReputation .icon {
			background: url('../../../images/uiIcons.png') -320px 0px;
		}

		&.btnMainMenu .icon {
			background: url('../../../images/uiIcons.png') 0px -64px;
		}

	}

}

.mobile .uiMenu {
	bottom: auto;
	top: 10px;
	right: 10px;
	width: @btnSize;
	height: @btnSize;

	&:after {
		content: '';
		position: absolute;
		left: 0px;
		top: 0px;
		background: url('../../../images/uiIcons.png');
		background-position: 0px -64px;
		width: @btnSize;
		height: @btnSize;
	}

	> * {
		display: none;
	}

	&.active {
		display: flex;
		flex-direction: column;
		height: calc(100% - 20px);
		width: 200px;
		z-index: 2;
		flex-wrap: wrap-reverse;
		align-items: center;
		justify-content: center;

		&:after {
			display: none;
		}

		> * {
			display: block;
			margin: 0px;
		}

		.btnCollapse {
			display: block;
			position: absolute;
			right: calc(100% + 10px);
			top: 50%;
			transform: translateY(-50%);
			background-color: fade(@darkGray, 90%);
			width: @btnSize;
			height: @btnSize;

			.icon {
				width: 100%;
				height: 100%;
				background: url('../../../images/uiIcons.png') -448px 0px;
			}

		}

	}

}
