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

.uiQuests {
	width: 320px;

	.heading {
		color: @yellow;
		padding: 8px;
		background-color: fade(#3a3b4a, 90%);
	}

	.list {
		.quest {
			cursor: pointer;
			padding: 8px;
			background-color: fade(#3a3b4a, 90%);

			&:hover {
				background-color: fade(lighten(#3a3b4a, 15%), 90%);
			}

			.zone {
				color: @grayD;
				margin-bottom: 4px;
				text-align: right;
			}

			.name {
				color: @white;
				margin-bottom: 3px;
			}

			.description {
				color: darken(@white, 35%);
			}

			.reward {
				display: none;
				color: @tealC;
			}

			&:hover {
				> .description {
					display: none;
				}

				> .reward {
					display: block;
				}
			}

			.ready-text {
				display: none;
			}

			&.active {
				.name {
					color: @blue;
				}
			}

			&.ready {
				.name {
					color: @green;
				}

				.description {
					display: none;
				}

				.reward {
					display: none;
				}

				.ready-text {
					display: block;
					color: @white;
				}
			}
		}
	}
}
