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

.uiPartyLoot {
	position: absolute;
	width: 392px;
	left: 50%;
	transform: translateX(-50%);
	bottom: 16px;

	.item, .result {
		position: relative;
		height: 96px;
		border: 4px solid @blackA;
		padding: 8px;
		background-color: fade(@blackD, 95%);
		margin-top: 8px;

		.left, .right {
			float: left;
		}

		.left {	
			.icon {
				width: 64px;
				height: 64px;
				position: relative;
				float: left;
				cursor: pointer;

				.image {
					position: absolute;
					left: -4px;
					top: -4px;
					width: 100%;
					height: 100%;
					background: url('../../../images/items.png') 0px 0px;
				}
			}

			.description {
				width: 192px;
				float: left;
				
				text-align: center;
				line-height: 18px;

				.name {
					margin-top: 0px;
				}
			}
		}

		.right {
			width: 104px;
			margin-left: 8px;

			> * {
				float: left;
			}
		}
	}

	.result {
		height: 80px;

		.name {
			margin-top: -2px;
		}

		.winText {
			margin-bottom: 4px;
			color: @white;
		}

		border-color: @red;

		&.winner {
			border-color: @green;
		}

		.roll {
			width: 100%;
			height: 24px;
			float: left;
			margin-bottom: 8px;
			position: relative;

			> * {
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				text-align: center;
				color: @white;
			}

			.bar {
				background-color: @blackA;
				width: 50%;
			}

			&.winner .bar {
				background-color: @blackB;
			}

			.text {
				padding-top: 3px;
			}
		}
	}

	.item {
		.right {
			.leftButtons {
				width: 72px;
			}

			.button {
				height: 24px;
				text-align: center;
				margin-bottom: 8px;
				padding-top: 4px;
				background-color: @blackA;
				color: @white;

				&:hover {
					background-color: @blue;

					&.btnPass {
						background-color: @red;
					}
				}
			}

			.rightButtons {
				margin-left: 8px;
				height: 56px;
				width: 24px;
				padding-top: 20px;
			}
		}

		.bottom {
			width: 100%;
			height: 8px;
			position: relative;
			background-color: fade(@blackC, 95%);
			float: left;

			.bar {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				background-color: @white;
			}
		}
	}
}