@import "settings";

// SET UP YOUR FORMS AND BUTTONS IN THIS FILE
// -----------------------------------------------------------

label {
	display: block;
}

input, textarea, select {
	width: 100%;
}

input, select {
	max-width: em-calc(360px);
}

textarea {
	max-width: em-calc(500px);
}

input[type="search"] {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-appearance: textfield;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

textarea,
select,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
	outline: none;

	&:focus {
		outline: none;
	}

	option {
		
	}
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
select {
	@include border-radius(3px);
	@include transition-property(background-color, border-color);
	@include transition-duration(0.2s);
	@include transition-timing-function(linear);
	border: 2px solid $brd-clr-input;
	color: $txt-clr-input;
	padding: em-calc(7px) em-calc(10px);
	background: transparent;

	&:focus {
		border-color: $brd-clr-input-alt;
	}
	&.light {
		border: 2px solid #fff;
		color: #fff;
	}
}

input[type="radio"],
input[type="checkbox"] {
	margin: 4px 0 0;
	margin-top: 1px  \9;
	*margin-top: 0;
	line-height: normal;
	cursor: pointer;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
	width: auto;
}

select,
input[type="file"] {
	*margin-top : 4px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

input[type="submit"],
button,
.btn {
	@include font-roboto-bold;
	@include transition-property(background-color, color, border-color);
	@include transition-duration(0.2s);
	@include transition-timing-function(linear);
	display: inline-block;
	font-size: em-calc($fs-s);
	padding: em-calc(7px, $fs-s) em-calc(45px, $fs-s) em-calc(7px, $fs-s) em-calc(15px, $fs-s);
	line-height: lh-calc($lh-s, $fs-s);
	position: relative;
	outline: none;
	@include border-radius(3px);
	
	color: $txt-clr-btn-1;
	background-color: $bg-clr-btn-1;
	border: 2px solid $brd-clr-btn-1;

	&:after {
		@include icon-font('icon-arrow-right');
		position: absolute;
		padding: em-calc(7px, $fs-s) em-calc(15px, $fs-s);
		line-height: lh-calc($lh-s, $fs-s);
		top: 0;
		right: 0;
	}

	&:hover, &:active {
		color: $txt-clr-btn-1-alt;
		background-color: $bg-clr-btn-1-alt;
		border: 2px solid $brd-clr-btn-1-alt;
	}
}

.btn-big {
	font-size: em-calc($fs-default);
	line-height: lh-calc($lh-default);
	padding: em-calc(9px) em-calc(45px) em-calc(9px) em-calc(15px);

	&:after {
		padding: em-calc(9px) em-calc(15px);
		line-height: lh-calc($lh-default);
	}
}

.btn-group {
	@include proper-clearfix;
	.btn {
		position: relative;
		display: block;
		margin-top: -2px;
		z-index: 1;
		@include border-radius(0);
		width: 100%;
		&:first-child {
			margin-top: 0;
			@include border-radius(3px 3px 0 0);
		}
		&:last-child {
			// margin-bottom: -2px;
			@include border-radius(0 0 3px 3px);
		}
		&:hover {
			z-index: 2;
		}
	}

	@media only screen and (min-width: 40em) {
		.btn {
			float: left;
			margin-top: 0;
			margin-bottom: 0;
			margin-left: -2px;
			@include border-radius(0);
			width: auto;
			&:first-child {
				margin-top: 0;
				margin-left: 0;
				@include border-radius(3px 0 0 3px);
			}
			&:last-child {
				margin-right: -2px;
				@include border-radius(0 3px 3px 0);
			}
		}
	}
}

.btn-alt {
	color: $txt-clr-btn-2;
	background-color: $bg-clr-btn-2;
	border: 2px solid $brd-clr-btn-2;

	&:hover, &:active {
		color: $txt-clr-btn-2-alt;
		background-color: $bg-clr-btn-2-alt;
		border: 2px solid $brd-clr-btn-2-alt;
	}
}

.btn-alt-2 {
	color: $txt-clr-btn-3;
	background-color: $bg-clr-btn-3;
	border: 2px solid $brd-clr-btn-3;

	&:after {
		@include transition-property(color);
		@include transition-duration(0.2s);
		@include transition-timing-function(linear);
	}

	&:hover, &:active {
		color: $txt-clr-btn-3-alt;
		background-color: $bg-clr-btn-3-alt;
		border: 2px solid $brd-clr-btn-3-alt;
		&:after {
			color: $orange;
		}
	}
}

// This button is used in the dark "blocks"
.btn-alt-3 {
	color: $txt-clr-btn-4;
	background-color: $bg-clr-btn-4;
	border: 2px solid $brd-clr-btn-4;

	&:hover, &:active {
		color: $txt-clr-btn-4-alt;
		background-color: $bg-clr-btn-4-alt;
		border: 2px solid $brd-clr-btn-4-alt;
	}
}

// This button is used in the footer
.btn-alt-4 {
	color: $txt-clr-btn-5;
	background-color: $bg-clr-btn-5;
	border: 2px solid $brd-clr-btn-5;

	&:hover, &:active {
		color: $txt-clr-btn-5-alt;
		background-color: $bg-clr-btn-5-alt;
		border: 2px solid $brd-clr-btn-5-alt;
	}	
}


.btn-block {
	display: block;
}

@media only screen and (min-width: 53em) {
	.btn-block-responsive {
		display: block;
	}
}