@import "@{parenturl}/wp-less/mixin.less";

#design-portfolio {
	min-height:75vh;
	height:40vw;
	.widthSetter {
		display:grid;
		grid-gap:10px;
		grid-template-columns:auto 1fr;
		* {
			align-self:center;
		}
		.inputWidth {
			position:relative;
			margin:0 0 0 35px;
			width:~"calc(100% - 35px)";
			line-height:0;
			input[type="range"] {
				width:100%;
				&:not(:active):hover { cursor:grab; }
				&:active:hover { cursor:grabbing; }
			}
			.inputNumber {
				position:absolute;
				.translateX(-50%);
				line-height:1;
				pointer-events:none;
				display:inline-grid;
				background-color:#fffbf7;
				grid-template-columns: 1em auto auto 1em;
				&:before, &:after {
					content:' ';
					display:block;
					margin:auto;
					border-top: .5em solid transparent;
					border-bottom: .5em solid transparent;
				}
				&:before {
					border-right: .5em solid;
				}
				&:after {
					border-left: .5em solid;
				}
				input[type="number"] {
					display:block;
					text-align:center;
					border:none;
					background:transparent;
				}	
				.unit {
					display:block;
					margin-left:-1em;
					position:relative;
					background-color:#fffbf7;
					height:2em;
					line-height:2em;
				}
			}
		}
	}
	iframe {
		display:block;
		width:100%;
		height:100%;
		box-shadow: 0 0 5px fade(#000, 75);
	}
}
.custom-html-widget {
	display:none !important;
}