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

.uiWardrobe {
	display: none;

	width: 450px;
	height: 300px;

	background-color: @blackB;
	border: 5px solid #c0c3cf;
	padding: 10px;

	text-align: center;

	.top {
		width: 100%;
		margin-bottom: 10px;

		.heading {
			color: @orange;
			height: 20px;
			text-align: center;
			cursor: pointer;
		}
	}

	.bottom {
		height: calc(100% - 20px);

		.left, .right {
			float: left;
			height: 100%;
		}

		.left {
			width: calc((100% - 10px) * 0.4);
			margin-right: 10px;

			.heading {
				width: 100%;
				height: 20px;
				color: @yellow;
			}

			.list {
				width: 100%;
				height: calc(100% - 30px);
				padding-top: 10px;
				overflow: auto;

				.skinName {
					width: 100%;
					cursor: pointer;
					color: white;
					margin-bottom: 5px;

					&:hover {
						background-color: gray;
					}

					&.active {
						color: @blueA;
					}

					&.current {
						&:after {
							content: ' (x)';
						}
					}
				}
			}
		}

		.right {
			width: calc((100% - 10px) * 0.6);
			position: relative;

			.heading {
				width: 100%;
				height: 20px;
				color: @yellow;
			}

			.preview {
				padding-left: calc((100% - (8 * 16px)) / 2);
				padding-top: 10px;
				position: relative;

				.bg {
					width: 128px;
					height: 128px;
					background-color: @black;
				}

				.sprite {
					width: 8px;
					height: 8px;
					position: absolute;
					left: calc((100% - (8 * 16px)) / 2);
					top: 10px;
					transform: scale(16);
					transform-origin: 0% 0%;
					image-rendering: optimizeSpeed;
					image-rendering: pixelated;
					image-rendering: crisp-edges;
				}
			}

			.buttons {
				width: 100%;
				position: absolute;
				bottom: 10px;
				right: 0px;

				.btn {
					float: left;
					width: calc((100% - 50px) / 2);
					height: 40px;
					padding-top: 12px;
					color: white;
					cursor: pointer;

					&:first-child {
						margin-right: 50px;
					}
				}

				.btnCancel {
					background-color: @redB;

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

				.btnApply {
					background-color: @greenB;

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