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

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

	> .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 {
			float: left;
			height: 440px;
		}

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

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

				&: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"] 	.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="twoHanded"] .icon { background-position: -384px -384px; }
					&[slot^="rune"] 	.icon { background-position: -320px -384px; }
				}

				.icon {
					height: 100%;
				}

				&:hover {
					.icon {
						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 - 80px);

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

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

					&.empty {
						height: 22px;
					}

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

			.runes {
				width: 100%;
				height: 80px;
				padding-left: calc((100% - (80px * 2) - 8px) / 2);

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

					&: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);
						}				
					}
				}
			}
		}
	}	
}