//variables
$gutter : 40px;
$blue: #64C7CC;
$background-color: #fafafa;

@import "normalize";
@import "animations";
@import "custom-form-ui";


*, *:before, *:after {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: $background-color;
}

h1 {
	margin: 0 0 54px;
}

h3 {
	margin-top: 0;
}

pre {
	background: #fff;
	padding: $gutter/2;
}

a {
	color: #333;
	text-decoration: none;

	&:hover {
		color: $blue;
	}
}

.container {
	max-width: 1350px;
	margin: 0 auto;
	overflow: hidden;
}


form {
	width: 100%;
	overflow: hidden;
	background: #fff;

	.col {
		width: 25%;
		float: left;
		padding: 0 $gutter/2;
	}

	.container { padding: 30px $gutter/2 0; }
}

.credits {
	text-align: right;
	background: #fff;

	.container { padding: 0 $gutter; }

	p {
		line-height: 30px;
		font-size: 14px;
		margin: 7px 0;
	}

	a.icon {
		vertical-align: text-top;

		&:hover path {
			fill: $blue;
		}
	}

	svg.github {
		position: relative;
		top: -3px;
	}

	svg.twitter { margin-left: 3px;}
}

.output {
	overflow: hidden; //cheap clearfix
	padding: $gutter;
}


	.snippet {
		float: left;
		width: 50%;
	}


	.result {
		float: left;
		width: calc(50% - #{$gutter});
		margin-right: $gutter;
		padding: $gutter/3;

		//css checkerboard
		background-color: #fefefe;
		background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%, transparent 75%, #f5f5f5 75%, #f5f5f5),
		linear-gradient(45deg, #f5f5f5 25%, transparent 25%, transparent 75%, #f5f5f5 75%, #f5f5f5);
		background-size: 30px 30px;
		background-position:0 0, 15px 15px
	}

	.preview .hexagon {
		margin-left: auto;
		margin-right: auto;
	}

	.hexagon {
		// give it a default bg color in case img isn't working
		background-color: #E4FEFF;
	}

@media screen and (max-width: 1250px) {
	h1 {
		margin-bottom: 31px;
		br {display: none;}
	}

	form {
		.container {
			-moz-columns: 2;
			-webkit-columns: 2;
			columns: 2;
			-moz-column-gap: 0;
			-webkit-column-gap: 0;
			column-gap: 0;
		}

		.col {
			width: 100%;
			&:nth-child(even) {padding-top: $gutter;}
		}
	}
}

@media screen and (max-width: 800px) {
	h1 {
		margin-bottom: 35px;
		br {display: block;}
	}

	.result {
		width: 100%;
		margin-bottom: $gutter;
	}
	.snippet {
		width: 100%;
	}
}

@media screen and (max-width: 650px) {
	form .container {
		-moz-columns: 1;
		-webkit-columns: 1;
		columns: 1;

		.col {padding-left: 0; padding-right: 0;}
		.col:nth-child(3) {padding-top: $gutter;}
	}

	.credits .container{
		padding: $gutter/2 $gutter/2 0;
		text-align: left;
	}
	.output {
		padding-left: $gutter/2;
		padding-right: $gutter/2;
	}
}

/* form styls */

.fieldGroup {
	display: block;
	position: relative;
}

label {
	line-height: 25px;
	font-size: 15px;
}

.checkbox,
.color,
.range,
.radio {
	label {
		display: block;
		padding-left: 2px;
		border-bottom: solid 1px #333;
		margin-top: 18px; //same height as big # fields
	}
}

.number {
	label {
		position: absolute;
		left: 2px;
		bottom: 2px;
	}

	&:after {
    	content: "px";
    	font-size: 30px;
    	position: absolute;
    	right: 0;
    	bottom: 3px;
    	font-size: 25px;
    }
}

label[for=image]{
	display: block;
	margin-top: 14px;
	margin-bottom: 9px
}

input[type=number] {

	padding: 6px 30px 0;
	border: none;
	border-bottom: solid 1px #333;
	width: 100%;
	font-size: 30px;
	text-align: right;

	//kill the buttons!!
	-moz-appearance:textfield;

	&::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
    	-webkit-appearance: none;
    }

	&:focus {
		outline: none;
		// border-bottom-color: $blue;
		color: $blue;

		+ label:after {color: $blue;}
	}

	&.ng-invalid {color: red;}
}

input[type=checkbox],
input[type=color],
input[type=range],
input[type=radio] {
	position: absolute;
	right: 2px;
}

input[type=color] {
	bottom: 1px;
}

input[type=range] {
	width: 110px;
	bottom: 10px;
}


input[type=url] {
	font-size: 25px;
	border: none;
	border-bottom: solid 1px #333;
	width: 100%;
	padding-top: 11px;
	text-overflow: ellipsis;

	&:focus {
		outline: none;
		color: $blue;
	}

	&.ng-invalid {color: red;}
}

/* clipboard styls */
.code-container {
  $button-color: $blue;
  position: relative;
  .button-copy {
    position: absolute;
    width: 60px;
    right: 8px;
  	top: 50px;
    background: none;
    border: 1px solid #666;
    color: #666;
    font-family: $bodyFont;
    font-size: 13px;

    &.button-copy-is-hover,
    &:focus {
      background-color: $button-color;
      color: #fff;
      outline: none;
    }
  }
}
