// Buttons
// 
// I am going to assume that you know what a button is.
// 
// Styleguide 2

// Basic Buttons
// 
// A majority of buttons in the site are built from the same base class.
// 
// Markup:
// <button class="{{modifier_class}}">Button Element</button>
// 
// .btngrade                 - Cursor hover state
// .btn.hover                - Cursor hover state
// .btn.active               - Keyboard focus state
// 
// Styleguide 2.1

// Search Button
// 
// A majority of buttons in the site are built from the same base class.
// 
// Markup:
// <button class="btn {{modifier_class}}">Button Element</button>
// 
// .search               - Used in search pattern
// .search.hover         - Used in search pattern
// .search.active        - Used in search pattern
// 
// Styleguide 2.2

// Known Search Button
// 
// A majority of buttons in the site are built from the same base class.
// 
// Markup:
// <button class="btn {{modifier_class}}">Button Element</button>
// 
// .search-known         - Used in search pattern
// .search-known.hover   - Used in search pattern
// .search-known.active  - Used in search pattern
// 
// Styleguide 2.3

// Primary Button
// 
// A majority of buttons in the site are built from the same base class.
// 
// Markup:
// <button class="btn {{modifier_class}}">Button Element</button>
// 
// .primary              - Primary button choice
// .primary.hover        - Primary button choice
// .primary.active       - Primary button choice
// 
// Styleguide 2.4

// Light Button
// 
// A majority of buttons in the site are built from the same base class.
// 
// Markup:
// <button class="btn {{modifier_class}}">Button Element</button>
// 
// .light                - Used in light design
// .light.hover          - Used in light design
// .light.active         - Used in light design
// 
// Styleguide 2.5

// Disabled Button
// 
// A majority of buttons in the site are built from the same base class.
// 
// Markup:
// <button class="btn {{modifier_class}}">Button Element</button>
// 
// .disabled             - Disabled input state
// .disabled.hover       - Disabled input state
// .disabled.active      - Disabled input state
// 
// Styleguide 2.6

// Mini Buttons
// 
// Markup:
// <button class="btn-mini {{modifier_class}}">Button Element</button>
// 
// .active               - Keyboard focus state
// .hover                - Cursor hover state
// .search               - Used in search pattern
// .light                - Used in light design
// .light.hover          - Used in light design
// .light.active         - Used in light design
// .disabled             - Disabled input state
// .disabled.hover       - Disabled input state
// .disabled.active      - Disabled input state
// 
// Styleguide 2.7

// Text Buttons
// 
// Markup:
// <button class="{{modifier_class}}">Button Element</button>
// 
// .btn-txt		                 - Cursor hover state
// .btn-txt.hover                - Cursor hover state
// .btn-txt.active               - Keyboard focus state
// 
// Styleguide 2.8

// Text Button Links
// 
// Markup:
// <button class="{{modifier_class}}">Button Element</button>
// 
// .btn-txt-link	                  - Cursor hover state
// .btn-txt-link.hover                - Cursor hover state
// .btn-txt-link.active               - Keyboard focus state
// 
// Styleguide 2.9

.btn-kind(@kind) {
	&.@{kind} {
		color: ~'@{btn-@{kind}-color}';
		& when (@kind = search-known) {
		line-height: 2.3rem;
		}
		.bg-border(@kind) {
		background-color: ~'@{btn-@{kind}-bgcolor}';
		border-color: ~'@{btn-@{kind}-bordercolor}';
		}
		& when (@kind = disabled) {
		cursor: default;
		.bg-border(@kind);
		box-shadow: none;
		}
		& when (@kind = search), (@kind = search-known), (@kind = primary), (@kind = light) {
		.bg-border(@kind);	
		.btngrade( ~'@{btn-@{kind}-fade-top}', ~'@{btn-@{kind}-fade-bottom}' );
		}
		&:hover,
		&.hover {
			background-color: ~'@{btn-@{kind}-bgcolor-hover}';
			border-color: ~'@{btn-@{kind}-bordercolor-hover}';
			& when (@kind = light) {
			.btngrade( darken(@btn-light-fade-top, 20%), darken(@btn-light-fade-bottom, 20%) ); // these don't work if a passed in variable is used
			}
		}
		&:active,
		&.active {
			background-color: ~'@{btn-@{kind}-bgcolor-active}';
			border-color: ~'@{btn-@{kind}-bordercolor-active}';
		}
		& when (@kind = disabled) {
		&.flat {
			.btngrade( transparent, transparent );
		}
		}
	}
}

.btn,
.btn-mini {
	& + & {
		margin-left: 10px;
	}

	display: inline-block;
	width: auto;

	color: @btn-default-color;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: top;

	cursor: pointer;
	background-color: @btn-default-bgcolor;
	border: 1px solid @btn-default-bordercolor;
	.btngrade( @btn-default-fade-top, @btn-default-fade-bottom );

	&:hover,
	&.hover {
		background-color: @btn-default-bgcolor-hover;
		border-color: @btn-default-bordercolor-hover;
	}

	&:active,
	&.active {
		background-color: @btn-default-bgcolor-active;
		border-color: @btn-default-bordercolor-active;
		box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
		background-image: none !important;
	}

	// loop through the button kinds and hit the .btn-kind mixin
	@list: search, search-known, primary, light, disabled;
	@listLength: length(@list);
	.loop(@passedIn, @index: 1) when (@index =< @passedIn) {
		@arrayVal: extract(@list, @index);
		.btn-kind(@arrayVal);	 
		.loop(@passedIn, (@index + 1));
	}
	.loop(@listLength);
	// end the loop

	&.flat {
		.btngrade( transparent, transparent );
	}
}

.btn.light {
	line-height: 2.3rem;
}

.btn-mini.light {
	line-height: 1.1rem;
}

// button overrides
.btn {
	.radius;

	height: @btn-height;
	padding: 0 15px;
	
	.fontsize(@btn-font-size);
	line-height: unit((@btn-font-size * 2), rem);

	// overrides to the light buttons
	&.light {
		height: 25px;
	}

	// overrides to the known buttons
	&.search-known {
		height: 25px;
	}

	// override for light button line-height
	> .light {
		line-height: unit((@btn-font-size * 2), rem);
	}

	// overrides to the mini buttons
	&-mini {		 
		.radius(2);

		height: 18px;
		padding: 0 10px;
		 
		@btn-mini-font-size: 1.1;
		.fontsize(@btn-mini-font-size);
		.fontsize( unit((@btn-mini-font-size), px) );

		// override for light button line-height
		> .light {
			line-height: unit((@btn-mini-font-size), px);
		}
	}

	// overrides to the text buttons
	&-txt,
	&-txt-link {
		background-color: @btn-bgcolor-txt;
		border-color: @btn-bordercolor-txt;
		padding: 0;
		font-size: 13px;

		&:hover,
		&.hover,
		&:active,
		&.active {
			background-color: @btn-bgcolor-txt-hover;
			border-color: @btn-bordercolor-txt-hover;
			text-decoration: underline;
			box-shadow: none;
		}
	}

	// overrides to the text buttons
	&-txt {
		color: @btn-color-txt;

		& + & {
			margin-left: 15px;
		}
	}

	// overrides to the text buttons
	&-txt-link {
		color: @btn-color-txt-link;

		& + & {
			margin-left: 15px;
		}
	}
}