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

.uiEquipment {
	display: none;
	z-index: 2;
	border: 5px solid @blackB;
	text-align: center;
	width: 474px;
	height: 712px;

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

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

	.bottom {
		height: calc(100% - 36px);
		background-color: @blackC;

		.tabs {
			width: 100%;
			height: 40px;
			padding: 8px 8px 0px 8px;

			.tab {
				cursor: pointer;
				background-color: @blackB;
				color: @white;
				margin-right: 8px;
				float: left;
				height: 100%;
				padding-top: 8px;
				padding-left: 8px;
				padding-right: 8px;
				width: calc((100% - 24px) / 4);

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

				&.selected {
					background-color: @blackA;
					color: @blueA;
				}

				&:last-child {
					margin-right: 0px;
				}
			}
		}

		.left, .stats, .right, .bottom {
			float: left;
			height: 528px;
		}

		.left, .right, .itemList, .runes, .tools {
			width: 96px;
			padding: 8px;	

			.slot {
				width: 80px;
				height: 80px;
				background-color: @blackD;
				margin-bottom: 8px;
				cursor: pointer;
				padding: 8px;
				position: relative;

				&:last-child {
					margin-bottom: 0px;
				}

				&.show-default-icon {
					.icon {
						opacity: 0.5;
						background-image: url('../../../images/uiIcons.png') !important;
					}

					&[slot="head"] 		.icon { background-position: -0px -448px; }
					&[slot="neck"] 		.icon { background-position: -64px -448px; }
					&[slot="chest"] 	.icon { background-position: -128px -448px; }
					&[slot="hands"] 	.icon { background-position: -192px -448px; }
					&[slot="finger-1"] 	.icon { background-position: -256px -448px; }
					&[slot="finger-2"] 	.icon { background-position: -256px -448px; }
					&[slot="waist"] 	.icon { background-position: -320px -448px; }
					&[slot="legs"] 		.icon { background-position: -384px -448px; }
					&[slot="feet"] 		.icon { background-position: -448px -448px; }
					&[slot="trinket"] 	.icon { background-position: -448px -384px; }
					&[slot="oneHanded"] 	.icon { background-position: -384px -384px; }
					&[slot="offHand"] 	.icon { background-position: -192px -384px; }
					&[slot="tool"] 		.icon { background-position: -256px -384px; }
					&[slot^="rune"] 	.icon { background-position: -320px -384px; }
				}

				.icon {
					height: 100%;
				}

				.info {
					left: 6px;
					bottom: 3px;
					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);

					-moz-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);

				}

				&:hover {
					.icon {
						filter: brightness(160%);
						-moz-filter: brightness(160%);
					}

					&.empty {
						background-color: fade(@blueA, 10%);
					}
				}
			}
		}

		.middle {
			float: left;
			width: calc(100% - (2 * 96px));

			.stats {
				width: 100%;
				padding-top: 16px;
				height: calc(440px - 88px);

				.stat {
					height: 22px;

					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);

					-moz-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);

					&.blueText > font {
						color: @blue;
					}

					&.empty {
						height: 22px;
					}

					&.gold {
						font {
							color: @yellowB;
						}
					}
				}
			}

			.tools {
				width: 100%;
				height: 80px;

				.slot {
					float: left;
					margin-right: 8px;

					&:last-child {
						margin-right: 0px;
					}
				}
			}

			.tools {
				clear: both;
				margin-bottom: 8px;
				padding-left: calc(50% - 40px);
			}
		}

		.bottom {
			height: 80px;

			.runes {
				width: 100%;
				height: 80px;

				.slot {
					float: left;
					margin-right: 12px;

					&:last-child {
						margin-right: 0px;
					}
				}
			}
		}

		.itemList {
			display: none;
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			background-color: @blackC;
			padding: 0px;

			.slot {
				float: left;
				margin: 8px 0px 0px 8px;

				.icon {
					position: relative;

					&.eq {
						&:before {
							content: 'eq';
							left: -2px;
							bottom: -3px;
							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);

							-moz-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);
						}				
					}

					&.new {
						&:before {
							content: 'new';
							left: -2px;
							bottom: -3px;
							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);

							-moz-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);
						}				
					}
				}
			}
		}
	}	
}
