/* =============================================================================
   Forms
   ========================================================================== */

// =============================================================================
// Normalize form styles (normalize.css)
// =============================================================================

//
// Define consistent border, margin, and padding.
//

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

//
// 1. Correct `color` not being inherited in IE 8/9.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//

legend {
	border: 0; // 1
	padding: 0; // 2
}

//
// 1. Correct font family not being inherited in all browsers.
// 2. Correct font size not being inherited in all browsers.
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
//

button,
input,
select,
textarea {
	font-family: inherit; // 1
	font-size: 100%; // 2
	margin: 0; // 3
}

//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//

button,
input {
	line-height: normal;
}

// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
// Correct `select` style inheritance in Firefox 4+ and Opera.
//

button,
select {
	text-transform: none;
}

//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
//    and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
//    `input` and others.
//

button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button; // 2
	cursor: pointer; // 3
}

//
// Re-set default cursor for disabled elements.
//

button[disabled],
html input[disabled] {
  cursor: default;
}

//
// 1. Address box sizing set to `content-box` in IE 8/9.
// 2. Remove excess padding in IE 8/9.
//

input[type="checkbox"],
input[type="radio"] {
	.box-sizing(border-box); // 1
	padding: 0; // 2
}

//
// Address `appearance` set to `searchfield` in Safari 5 and Chrome.
//

input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
}

//
// Remove inner padding and search cancel button in Safari 5 and Chrome
// on OS X.
//

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

//
// Remove inner padding and border in Firefox 4+.
//

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

//
// 1. Remove default vertical scrollbar in IE 8/9.
// 2. Improve readability and alignment in all browsers.
//

textarea {
	overflow: auto; // 1
	vertical-align: top; // 2
}

// =============================================================================
// Cakifo form styles
// =============================================================================

label,
input,
button,
select,
textarea {
	#font > .shorthand(@font-size-medium, normal, normal); // Set size, weight, line-height
}

/**
 * Labels
 */
label {
	display: block;
	margin-bottom: 5px;
	#font > .shorthand(@font-size-medium);
	cursor: pointer;
}

/**
 * Inputs
 */
select,
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"],
input[type="color"] {
	padding: 8px 6px;
	margin-bottom: 10px;
	font-family: @font-family-sans-serif;
	border: 1px solid @input-border-color;
	border-radius: 3px;
	box-shadow: inset 0 1px 1px fade(#000, 7.5%);
	color: @input-text-color;
	.transition(all 150ms ease);

	&:hover {
		border-color: @gray-light;
	}

	&:focus {
		border-color: fade(@input-focus-color, 80%);
		box-shadow:
			inset 0 1px 1px fade(#000, 7.5%),
			0 0 6px fade(@input-focus-color, 50%);
		outline: 0;
	}
}

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

// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
	width: auto; // Override of generic input selector
}

// Reset padding on color inputs
input[type="color"] {
	padding: 0;
}

// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	.tab-focus();
}

// Input sizes
.input-mini       { width: 60px;  }
.input-small      { width: 90px;  }
.input-medium     { width: 150px; }
.input-large      { width: 210px; }
.input-xlarge     { width: 270px; }
.input-xxlarge    { width: 100%;  }

/**
 * Disabled and read-only inputs
 */
input[disabled],
button[disabled],
select[disabled],
textarea[disabled],
input[readonly],
button[readonly],
select[readonly],
textarea[readonly] {
	background: @gray-lighter !important;
	cursor: not-allowed;

	&:active {
		box-shadow: none;
	}
}

// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
	background-color: transparent;
}

/* =============================================================================
   Buttons
   ========================================================================== */

// Core styles
.btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	padding: 4px 14px;
	#font > .shorthand(@font-size-base, bold, @line-height-base);
	border: 1px solid;
	border-radius: 3px;
	box-shadow:
		inset 0 1px 0 fade(#fff, 22%),
		0 1px 2px fade(#000, 5%);

	&:focus {
		.tab-focus();
	}

	&:active {
		background-image: none;
		box-shadow:
			inset 0 2px 4px fade(#000, 15%),
			0 1px 2px fade(#000, 5%);
		outline: 0;
	}

	&[disabled],
	fieldset[disabled] & {
		background: @gray-lighter;
		border-color: @gray-light;
		box-shadow: none;
		color: @gray;
		text-shadow: none;
		opacity: 0.65;
		cursor: default;
		pointer-events: none; // Future-proof disabling of clicks
	}
}

// Alternate buttons
.btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	.btn-pseudo-states(@btn-default-bg, @btn-default-secondary, @btn-default-color);
}

html {
	.btn-primary {
		.btn-pseudo-states(@btn-primary-bg, @btn-primary-secondary, @btn-primary-color);
	}

	.btn-success {
		.btn-pseudo-states(@btn-success-bg, @btn-success-secondary, @btn-success-color);
	}

	.btn-warning {
		.btn-pseudo-states(@btn-warning-bg, @btn-warning-secondary, @btn-warning-color);
	}

	.btn-danger {
		.btn-pseudo-states(@btn-danger-bg, @btn-danger-secondary, @btn-danger-color);
	}

	.btn-info {
		.btn-pseudo-states(@btn-info-bg, @btn-info-secondary, @btn-info-color);
	}

	.btn-inverse {
		.btn-pseudo-states(@btn-inverse-bg, @btn-inverse-secondary, @btn-inverse-color);

		&:hover {
			background: @orange-dark;
			border-color: darken(@orange-dark, 10%);
		}
	}
}

// Button sizes
.btn-large {
	padding: 9px 16px;
	.font-size(@font-size-large);
	line-height: normal;
	border-radius: 5px;
}

.btn-small {
	padding: 4px 9px;
	.font-size(@font-size-small);
}

.btn-mini {
	padding: 3px 7px;
	.font-size(@font-size-mini);
	font-weight: normal;
}

/* =============================================================================
   Layout:  Comment form
   ========================================================================== */

.comment-respond {
	padding: @gutter-width-small;
	margin: (@gutter-width + 20px) 0 0;
	background: @highlight-bg;
	border-top: @orange-line;
	color: @gray;

	// Logged-in text
	.log-in-out {
		.font-size(@font-size-large);
		text-align: center;
	}
}

.comment-reply-title {
	.highlight-box(
			10px @gutter-width-small, // padding
			(-@gutter-width) 0 @gutter-width-small // margin
	);
	.font-size(26);
	letter-spacing: -1px;
	text-align: center;
}

#cancel-comment-reply-link {
	padding-left: 10px;
	.font-size(@font-size-large);
	font-style: italic;
	font-weight: normal;
}

/* Comment form fields */
.comment-form {
	.form-author {
		float: left;
		width: 48%;
	}

	.form-email {
		float: right;
		width: 48%;
	}

	.form-url {
		clear: both;
	}
}

#submit {
	.btn-pseudo-states(@btn-primary-bg, @btn-primary-secondary, @btn-primary-color);
}

/* =============================================================================
   Layout:  Search form
   ========================================================================== */

.search-form {
	label {
		display: inline-block;
		margin-right: 5px;
	}

	.search-field {
		padding-left: 27px;
		background: #fff url(images/search.png) no-repeat 5px center;

		&[results] {
			padding-left: 6px;
			background-image: none;
		}
	}
}