@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* --------------------------------
Primary style
-------------------------------- */

*, *::after, *::before {
	@include box-sizing(border-box);
}

html {
	font-size: 62.5%;
}

body {
	font: {
		size: 1.6rem;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-1;
	background-color: $color-4;
}

a {
	color: $color-2;
	text-decoration: none;
}

/* --------------------------------
Form
-------------------------------- */

.cd-form {
	width: 90%;
	max-width: $M; // breakpoints inside partials > _layout.scss
	margin: 4em auto;
	@include clearfix;

	fieldset {
		margin: 24px 0;
	}

	legend {
		padding-bottom: 10px;
		margin-bottom: 20px;
		font-size: 2rem;
		border-bottom: 1px solid $color-3;
	}

	div {
		/* form element wrapper */
		position: relative;
		margin: 20px 0;
	}

	h4, .cd-label {
		font-size: 1.3rem;
		color: darken($color-3, 30%);
		margin-bottom: 10px;
	}

	.cd-label {
		display: block;
	}

	input, textarea, select, label {
		font-family: $primary-font;
		font-size: 1.6rem;
		color: $color-1;
	}

	input[type="text"],
	input[type="email"],
	textarea,
	select,
	legend {
		display: block;
		width: 100%;
		@include appearance(none);
	}

	input[type="text"],
	input[type="email"],
	textarea,
	select {
		/* general style for input elements */
		padding: 12px;
		border: 1px solid darken($color-3, 10%);
		background-color: $color-4;
		border-radius: .25em;
		box-shadow: inset 0 1px 1px rgba(#000, .08);

		&:focus {
			outline: none;
			border-color: $color-2;
			box-shadow: 0 0 5px rgba($color-2, .2);
		}
	}

	.cd-select {
		/* select element wapper */
		position: relative;

		&::after {
			/* arrow icon for select element */
			content: '';
			position: absolute;
			z-index: 1;
			right: 16px;
			top: 50%;
			margin-top: -8px;

			display: block;
			width: 16px;
			height: 16px;

			background: url('../img/cd-icon-arrow.svg') no-repeat center center;
			pointer-events: none;
		}
	}

	select {
		box-shadow: 0 1px 3px rgba(#000, .08);
		cursor: pointer;
	}

	select::-ms-expand {
		display: none;
	}

	.cd-form-list {
		margin-top: 16px;
		@include clearfix;
	}

	.cd-form-list li {
		/* wrapper for radio and checkbox input types */
		display: inline-block;
		position: relative;
		@include user-select(none);
		margin: 0 26px 16px 0;
		float: left;
	}

	input[type=radio],
	input[type=checkbox] {
		/* hide original check and radio buttons */
		position: absolute;
		left: 0;
		top: 50%;
		@include transform(translateY(-50%));
		margin: 0;
		padding: 0;
		opacity: 0;
		z-index: 2;
	}

	input[type="radio"] + label,
	input[type="checkbox"] + label {
		padding-left: 24px;
	}

	input[type="radio"] + label::before,
	input[type="radio"] + label::after,
	input[type="checkbox"] + label::before,
	input[type="checkbox"] + label::after {
		/* custom radio and check boxes */
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -8px;
		width: 16px;
		height: 16px;
	}

	input[type="radio"] + label::before,
	input[type="checkbox"] + label::before {
		border: 1px solid darken($color-3, 10%);
		background: $color-4;
		box-shadow: inset 0 1px 1px rgba(#000, .08);
	}

	input[type="radio"] + label::before,
	input[type="radio"] + label::after {
		border-radius: 50%;
	}

	input[type="checkbox"] + label::before,
	input[type="checkbox"] + label::after {
		border-radius: .25em;
	}

	input[type="radio"] + label::after,
	input[type="checkbox"] + label::after {
		background-color: $color-2;
		background-position: center center;
		background-repeat: no-repeat;
		box-shadow: 0 0 5px rgba($color-2, .4);
		display: none;
	}

	input[type="radio"] + label::after {
		/* custom image for radio button */
		background-image: url('../img/cd-icon-radio.svg');
	}

	input[type="checkbox"] + label::after {
		/* custom image for checkbox */
		background-image: url('../img/cd-icon-check.svg');
	}

	input[type="radio"]:focus + label::before,
	input[type="checkbox"]:focus + label::before {
		/* add focus effect for radio and check buttons */
		box-shadow: 0 0 5px rgba($color-2, .6);
	}

	input[type="radio"]:checked + label::after,
	input[type="checkbox"]:checked + label::after {
		display: block;
	}

	input[type="radio"]:checked + label::before,
	input[type="radio"]:checked + label::after,
	input[type="checkbox"]:checked + label::before,
	input[type="checkbox"]:checked + label::after {
		@include animation(cd-bounce .3s);
	}

	textarea {
		min-height: 200px;
		resize: vertical;
		overflow: auto;
	}

	input[type="submit"] {
		/* button style */
		border: none;
		background: $color-2;
		border-radius: .25em;
		padding: 16px 20px;
		color: $color-4;
		font-weight: bold;
		float: right;
		cursor: pointer;
		@include font-smoothing;
		@include appearance(none);

		.no-touch &:hover {
			background: lighten($color-2, 5%);
		}

		&:focus {
			outline: none;
			background: $color-1;
		}

		&:active {
			@include transform(scale(.9));
		}
	}

	[required] {
		background: url('../img/cd-required.svg') no-repeat top right;
	}

	.error-message p {
		background: $color-5;
		color: $color-4;
		font-size: 1.4rem;
		text-align: center;
		@include font-smoothing;
		border-radius: .25em;
		padding: 16px;
	}

	.error {
		border-color: $color-5 !important;
	}

	@include MQ(M) {
		div {
			/* form element wrapper */
			margin: 32px 0;
		}

			legend + div {
			/* reduce margin-top for first form element after the legend */
			margin-top: 20px;
		}

		h4, .cd-label {
			font-size: 1.4rem;
			margin-bottom: 10px;
		}

		input[type="text"],
		input[type="email"],
		textarea,
		select {
			padding: 16px;
		}
	}
}

@include keyframes(cd-bounce) {
	0%, 100% {
		@include transform(scale(1));
	}

	50% {
		@include transform(scale(.8));
	}
}

/* --------------------------------
Custom icons
-------------------------------- */

.cd-form {
	.icon input, .icon select, .icon textarea {
		padding-left: 54px !important;
	}

	.user {
		background: url('img/cd-icon-user.svg') no-repeat 16px center;
	}

	[required].user {
		background: url('img/cd-icon-user.svg') no-repeat 16px center,
					url('img/cd-required.svg') no-repeat top right;
	}

	.company {
		background: url('img/cd-icon-company.svg') no-repeat 16px center;
	}

	[required].company {
		background: url('img/cd-icon-company.svg') no-repeat 16px center,
					url('img/cd-required.svg') no-repeat top right;
	}

	.email {
		background: url('img/cd-icon-email.svg') no-repeat 16px center;
	}

	[required].email {
		background: url('img/cd-icon-email.svg') no-repeat 16px center,
					url('img/cd-required.svg') no-repeat top right;
	}

	.budget {
		background: url('img/cd-icon-budget.svg') no-repeat 16px center;
	}

	.message {
		background: url('img/cd-icon-message.svg') no-repeat 16px 16px;
	}

	[required].message {
		background: url('img/cd-icon-message.svg') no-repeat 16px 16px,
					url('img/cd-required.svg') no-repeat top right;
	}
}

/* --------------------------------
FLoating labels
-------------------------------- */

.js .floating-labels {
	div {
		margin: 28px 0;
	}

	.cd-label {
		position: absolute;
		top: 16px;
		left: 16px;
		font-size: 1.6rem;
		cursor: text;
		@include transition(top .2s, left .2s, font-size .2s);
	}

	.icon .cd-label {
		left: 56px;
	}

	.cd-label.float {
		/* move label out the input field */
		font-size: 1.2rem;
		top: -16px;
		left: 0 !important;
	}

	@include MQ(M) {

		legend + div {
			/* reduce margin-top for first form element after the legend */
			margin-top: 16px;
		}

		.cd-label {
			top: 20px;
		}
	}
}