@import "../../../css/colors.less";
@topPosition: 154px;

.uiParty {
	.party {
		position: absolute;
		left: 16px;
		top: @topPosition;

		.list {
			overflow-y: auto;
			max-height: calc(100vh - 591px);
			padding-right: 22px;

			.member {
				width: 160px;
				background-color: #3a3b4a;
				color: @white;
				cursor: pointer;

				& + .member {
					margin-top: 5px;
				}

				&.differentZone {
					opacity: 0.4;

					.statBox {
						[class^="stat"] {
							width: 0% !important;
						}

					}

				}

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

				.statBox {
					width: 100%;
					height: 20px;
					background-color: @blackB;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;

					& + .statBox {
						border-top: 2px solid @black;
					}

					[class^="stat"] {
						position: absolute;
						left: 0px;
						top: 0px;
						height: 100%;
					}

					.text {
						color: @white;
						z-index: 1;
						padding: 0px 2px;
						overflow: hidden;
						text-overflow: ellipsis;
						text-shadow: 2px 0px #2d2136, -2px 0px #2d2136, 0px -2px #2d2136, 0px 2px #2d2136, -2px -2px #2d2136, -2px 2px #2d2136, 2px -2px #2d2136, 2px 2px #2d2136;
					}

					&:nth-child(1) {
						background-color: #802343;
					}

					&:nth-child(2) {
						background-color: #42548d;
					}

					.statHp {
						background-color: #d43346;
					}

					.statMana {
						background-color: #3fa7dd;
					}

				}

			}

		}

	}

	.invite {
		position: absolute;
		right: 436px;
		bottom: 10px;
		background-color: fade(@blackC, 90%);
		padding: 10px;
		color: @white;
		display: flex;
		flex-direction: column;

		> .text {
			margin-bottom: 15px;
			text-align: center;
			display: flex;
			flex-direction: column;

			.name {
				margin-top: 10px;
			}

		}

		.buttons {
			display: flex;

			.btn {
				width: 100%;
				background-color: @blackA;
				text-align: center;
				padding: 10px;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;

				.text {
					pointer-events: none;
					color: @white;
					text-shadow: 2px 0px #2d2136, -2px 0px #2d2136, 0px -2px #2d2136, 0px 2px #2d2136, -2px -2px #2d2136, -2px 2px #2d2136, 2px -2px #2d2136, 2px 2px #2d2136;
				}

				& + .btn {
					margin-left: 10px;
				}

				&.btnDecline {
					background-color: @redB;

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

				}

				&.btnAccept {
					background-color: @tealD;

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

				}

			}

		}

	}

	&.full {
		.party {
			.list {
				.member {
					padding: 5px;
					background-color: fade(@blackC, 90%);
				}

			}

		}

	}

	&.compact {
		.party {
			.list {
				.member {
				}

			}

		}

	}

	&.minimal {
		.party {
			.list {
				.statBox {
					&:nth-child(2) {
						display: none;
					}

				}

			}

		}

	}

}

.mobile .uiParty .list {
	max-height: calc(100% - @topPosition - 10px);
}
