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

.uiMail {
	display: none;
	background-color: @blackB;
	border: 5px solid @blackB;
	text-align: center;

	> .heading {
		color: @blueA;
		width: 100%;
		height: 36px;
		background-color: @blackB;

		.heading-text {
			padding-top: 8px;
			margin: auto;
		}
	}

	.bottom {
		height: 99px;
		background-color: @blackC;
		padding: 10px;

		.col {
			float: left;
			width: 80px;
			height: 80px;

			&:nth-child(2) {
				width: 200px;
				padding-top: 4px;
				margin-left: 10px;

				> * {
					width: 100%;
					height: 31px;
				}

				.btnSend {
					height: 35px;
					background-color: @blueB;
					text-align: center;
					padding-top: 12px;
					color: @white;
					cursor: pointer;
				}

				input, input:-webkit-autofill {
					box-shadow: 0 0 0px 1000px darken(@blackB, 15%) inset;
					color: @white;
					-webkit-text-fill-color: @white;
					margin-bottom: 5px;
					text-align: center;
				}

				/* We duplicate this for firefox which doesn't like the webkit selector */
				input {
				    box-shadow: 0 0 0px 1000px darken(@blackB, 15%) inset;
					color: @white;
					-webkit-text-fill-color: @white;
					margin-bottom: 5px;
					text-align: center;
				}
			}

			.item {
				width: 100%;
				height: 100%;
				float: left;
				position: relative;
				cursor: pointer;
				box-sizing: border-box;

				.quantity {
					left: 6px;
					bottom: 3px;
					position: absolute;
					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);

					&.red {
						color: @red;
					}
				}

				.icon {
					width: 64px;
					height: 64px;
					position: absolute;
					left: 8px;
					top: 8px;
					filter: 
						brightness(100%)
						drop-shadow(0px -4px 0px @blackD) 
						drop-shadow(0px 4px 0px @blackD)
						drop-shadow(4px 0px 0px @blackD) 
						drop-shadow(-4px 0px 0px @blackD);

					-moz-filter: 
						brightness(100%)
						drop-shadow(0px -4px 0px @blackD) 
						drop-shadow(0px 4px 0px @blackD)
						drop-shadow(4px 0px 0px @blackD) 
						drop-shadow(-4px 0px 0px @blackD);
				}
			}
		}
	}
}
