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

@pad: 8px;
@btnSize: 64px;

.uiMessages {
	position: absolute;
	left: 10px;
	bottom: 10px;

	width: 480px;
	padding: @pad;

	pointer-events: none;

	.input {
		display: none;
	}

	&.typing {
		pointer-events: all;

		.el.textbox {
			&.message:not(.input) {
				display: block;
			}

			&.time {
				display: none;
			}
		}

		.filters {
			pointer-events: all;
			display: block;
		}

		.list {
			overflow-y: auto;
			background-color: @darkGray;

			.list-message {
				filter: none;
			}
		}
	}

	&.active {
		.list-message {
			opacity: 1 !important;
		}
	}

	.filters {
		display: none;
		width: 100%;
		height: 26px;
		margin-bottom: 10px;

		.filter {
			height: 100%;
			background-color: @blackC;
			float: left;
			color: @blackA;
			margin-right: 10px;
			padding: 5px 10px;
			cursor: pointer;

			&:hover {
				background-color: @blackB;
				color: @grayD;
			}

			&.active {
				background-color: @blackB;
				color: @green;

				&:hover {
					background-color: @blackA;
					color: @grayB;
				}
			}
		}
	}

	.list {
		overflow-y: hidden;
		width: 100%;
		max-height: 320px;

		.list-message {
			display: none;
			width: 100%;
			padding: 5px 10px;
			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);

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

			word-wrap: break-word;
			line-height: 18px;

			&.q {
				color: @grayB;
			}

			&.q0 {
				color: @white;
			}

			&.q1 {
				color: @greenB;
			}

			a, &.q2 {
				color: @blueB;
			}

			&.q3 {
				color: @purple;
			}

			&.q4 {
				color: @orange;
			}

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

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

			&.color-cyan {
				color: @blueA;
			}

			&.color-tealC {
				color: @tealC;
			}
		}

		&.rep .rep { display: block; }
		&.chat .chat { display: block; }
		&.info .info { display: block; }
		&.loot .loot { display: block; }
	}

	.el {
		&.textbox.message {
			display: none;
			background-color: @gray;
			text-align: left;
			padding: 5px 10px;
		}

		&.time {
			display: block;
			background-color: transparent;
			text-align: left;
			padding: 5px 10px;

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

			-moz-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);
		}

		width: 100%;
		color: @white;
	}
}

.mobile .uiMessages {
	padding: 10px 0px;
	pointer-events: all;

	.btnClose.active {
		float: right;
		margin-right: 0px;
		padding: 5px 20px;
		color: @redA;
	}

	input {
		display: none;
	}

	.filters {
		margin-bottom: 0px;
	}

	.list {
		height: 100%;
		max-height: 100%;
	}

	&.typing {
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: fade(@darkGray, 90%);
		display: flex;
		flex-direction: column;
		z-index: 999999999;

		.input {
			display: block;
		}

		.el.textbox:not(.input) {
			&.message, &.time {
				display: none;
			}
		}

		.keyboard {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			background-color: @blackC;
			justify-content: center;
			align-items: center;
			height: 292px;

			.key {
				flex: 1;
				background-color: @blackA;
				color: @white;
				padding: 8px 10px;
				text-align: center;
				border-top: 2px solid #373041;
				border-left: 1px solid #373041;
				border-right: 1px solid #373041;

				&.special {
					color: @orange;
				}

				&.hidden {
					color: @blackC;
				}

				&.space {
					flex: 5;
				}
			}

			.newline {
				width: 100%;
			}
		}
	}

	&:not(.typing) {
		top: 10px;
		right: 84px;
		left: auto;
		bottom: auto;
		width: @btnSize;
		height: @btnSize;
		background-color: fade(@darkGray, 90%);

		&:after {
			content: '';
			position: absolute;
			left: 0px;
			top: 0px;
			background: url('../../../images/uiIcons.png');
			background-position: -0px -128px;
			width: @btnSize;
			height: @btnSize;
		}

		> * {
			display: none;
		}
	}
}
