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

.uiSmithing {
	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: 170px;
		background-color: @blackC;
		padding: 10px;
	}

	.col {
		float: left;
		margin-right: 10px;

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

		.heading {
			width: 80px;
			height: 16px;
			color: @white;
			text-align: center;
			margin-bottom: 10px;
		}

		.content {
			width: 80px;
			height: 80px;
			background-color: @blackD;

			&.chance {
				padding-top: 32px;
				color: @white;
				text-align: center;
			}

			&.item-picker, &.actionButton {
				cursor: pointer;

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

			&.item-picker {
				> .icon {
					margin: 8px;
					display: inline-block;
					width: 64px;
					height: 64px;
					background: url('../../../images/uiIcons.png') -256px -64px;
				}
			}

			&.actionButton {
				padding: 8px;
				.icon {
					width: 64px;
					height: 64px;
					background: url('../../../images/uiIcons.png') -192px -64px;
				}
			}

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

		&:first-child {
			.heading {
				width: 190px;
			}

			.content {
				width: 190px;
				background-color: transparent;

				.col-btn {
					height: calc((100% - 10px) / 2);
				    width: 100%;
				    color: #f2f5f5;
				    text-align: center;
				    padding-top: 10px;
				    background-color: @blackB;
				    margin-bottom: 10px;
				    cursor: pointer;

				    &.selected {
				    	color: @orange;
				    }

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

				    &.col-half {
				    	width: calc((100% - 10px) / 2);
				    	float: left;

				    	&:nth-child(2n + 1) {
							margin-right: 10px;
				    	}
				    }

				    &:not(.col-half) {
						clear: both;
				    }
				}
			}
		}
	}
}
