// Buttons
//
// Markup:
// <button class="px2-btn">Default Button</button>
//
// Styleguide 2.0
.px2-btn{
	display: inline-block;
	border-radius: 3px;
	background-color: $px2-background-color; // fallback
	background-color: var(--px2-background-color, $px2-background-color);
	color: $px2-text-color; // fallback
	color: var(--px2-text-color, $px2-text-color);
	border: 1px solid $px2-text-color; // fallback
	border: 1px solid var(--px2-text-color, $px2-text-color);
	box-shadow: 0 2px 0px rgba(0,0,0,0.1);
	// text-shadow: 0px 0px 3px rgba(0,0,0,0.1);
	padding: 0.5em 2em;
	font-size:1em;
	font-weight: normal;
	font-family: $px2-font-family;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	align-items: stretch;
	transition:
		color 0.1s,
		background-color 0.1s,
		transform 0.1s
	;

	&:focus,
	&:hover{
		text-decoration: none;
		font-weight: normal;
		color: #666;
		background-color: #f3f3f3;
		// transform: scale(1.04, 1.04);
	}
	&:focus{
		box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
	}
	&:hover{
		background-color: #f0f0f0;
	}
	&:active{
		background-color: $px2-text-color; // fallback
		background-color: var(--px2-text-color, $px2-text-color);
		color: $px2-background-color; // fallback
		color: var(--px2-background-color, $px2-background-color);
		box-shadow: inset 0 3px 15px rgba(0,0,0,0.3);
		transform: translateY(1px);
		// transform: translateY(1px) scale(1.04, 1.04);
	}
}

// Elements
//
// Markup:
// <p><button class="px2-btn">Default Button</button></p>
// <p><input type="button" class="px2-btn" value="input type=button" /></p>
// <p><input type="submit" class="px2-btn" value="input type=submit" /></p>
// <p><a href="javascript:;" class="px2-btn">anchor</a></p>
// <p><label class="px2-btn">label</label></p>
//
// Styleguide 2.1

// Intention
//
// Markup:
// <p><button class="px2-btn">Default Button</button></p>
// <p><button class="px2-btn px2-btn--primary">Primary Button</button></p>
// <p><button class="px2-btn px2-btn--secondary">Secondary Button</button></p>
// <p><button class="px2-btn px2-btn--danger">Danger Button</button></p>
// <p><button class="px2-btn px2-btn--download">Download Button</button></p>
// <p><button class="px2-btn px2-btn--download px2-btn--block px2-btn--lg">
//     <strong>Download</strong>
//     <div><small>Pickles 2 @2.0.0-beta.14</small></div>
//     <div><small>for macOS</small></div>
// </button></p>
// <p><button class="px2-btn" disabled>Disabled Default Button</button></p>
// <p><button class="px2-btn px2-btn--primary" disabled>Disabled Primary Button</button></p>
// <p><button class="px2-btn px2-btn--secondary" disabled>Disabled Secondary Button</button></p>
// <p><button class="px2-btn px2-btn--danger" disabled>Disabled Danger Button</button></p>
// <p><button class="px2-btn px2-btn--download" disabled>Disabled Download Button</button></p>
//
// Styleguide 2.2
.px2-btn{

	&.px2-btn--primary{
		border-color: #00a0e6;
		background-color: #f5fbfe; // rgba(0,160,230,0.05);
		color: #00a0e6;
		&:focus,
		&:hover{
			background-color: #d9f1fb; // rgba(0,160,230,0.15);
		}
		&:hover{
			background-color: #ccecfa; // rgba(0,160,230,0.3);
		}
		&:active{
			background-color: #00a0e6;
			color: #fff;
		}
	}
	&.px2-btn--secondary{
		border-color: $px2-text-color; // fallback
		border-color: var(--px2-text-color, $px2-text-color);
		background: $px2-background-color; // fallback
		background: var(--px2-background-color, $px2-background-color);
		color: $px2-text-color; // fallback
		color: var(--px2-text-color, $px2-text-color);
		&:focus,
		&:hover{
			background-color: #f3f3f3;
		}
		&:hover{
			background-color: #f0f0f0;
		}
		&:active{
			background-color: $px2-text-color; // fallback
			background-color: var(--px2-text-color, $px2-text-color);
			color: $px2-background-color; // fallback
			color: var(--px2-background-color, $px2-background-color);
		}
	}
	&.px2-btn--danger{
		border-color: #e86a60;
		background-color: #fdf8f8; // rgba(232,106,96,0.05);
		color: #e86a60;
		&:focus,
		&:hover{
			background-color: #fce9e7; // rgba(232,106,96,0.15);
		}
		&:hover{
			background-color: #fae1df; // rgba(232,106,96,0.3);
		}
		&:active{
			background-color: #e86a60;
			color: #fff;
		}
	}
	&.px2-btn--download{
		border-color: #4ad64d;
		background-color: #f7fcf7; // rgba(74,214,77,0.05);
		color: #4ad64d;
		&:focus,
		&:hover{
			background-color: #e4f9e4; // rgba(74,214,77,0.15);
		}
		&:hover{
			background-color: #dbf7db; // rgba(74,214,77,0.3);
		}
		&:active{
			background-color: #4ad64d;
			color: #fff;
		}
	}

	&[disabled]{
		border-color: #ddd;
		background-color: rgba(153,153,153,0.05);
		color: #ddd;
		cursor: default;
		transform: none;
		&:focus,
		&:hover,
		&:active{
			border-color: #ddd;
			background-color: rgba(153,153,153,0.05);
			color: #ddd;
			cursor: default;
			box-shadow: 0 2px 0px rgba(0,0,0,0.1);
			transform: none;
		}
	}
}


// Toggle ON
//
// Markup:
// <p><button class="px2-btn px2-btn--toggle-on">Default Button</button></p>
// <p><button class="px2-btn px2-btn--primary px2-btn--toggle-on">Primary Button</button></p>
// <p><button class="px2-btn px2-btn--secondary px2-btn--toggle-on">Secondary Button</button></p>
// <p><button class="px2-btn px2-btn--danger px2-btn--toggle-on">Danger Button</button></p>
// <p><button class="px2-btn px2-btn--download px2-btn--toggle-on">Download Button</button></p>
// <hr />
// <p><button class="px2-btn px2-btn--toggle-on" disabled>Default Button</button></p>
// <p><button class="px2-btn px2-btn--primary px2-btn--toggle-on" disabled>Primary Button</button></p>
// <p><button class="px2-btn px2-btn--secondary px2-btn--toggle-on" disabled>Secondary Button</button></p>
// <p><button class="px2-btn px2-btn--danger px2-btn--toggle-on" disabled>Danger Button</button></p>
// <p><button class="px2-btn px2-btn--download px2-btn--toggle-on" disabled>Download Button</button></p>
//
// Styleguide 2.3
.px2-btn{
	&--toggle-on{
		box-shadow: inset 0 3px 15px rgba(0,0,0,0.15);
		transform: translateY(1px);
		// transform: translateY(1px) scale(1.04, 1.04);

		&[disabled]{
			box-shadow: inset 0 3px 15px rgba(0,0,0,0.15);
			transform: translateY(1px);
			&:focus,
			&:hover,
			&:active{
				box-shadow: inset 0 3px 15px rgba(0,0,0,0.15);
				transform: translateY(1px);
			}
		}
	}
}

// Sizing
//
// Markup:
// <p><button class="px2-btn px2-btn--sm">Default Button</button></p>
// <p><button class="px2-btn">Default Button</button></p>
// <p><button class="px2-btn px2-btn--lg">Default Button</button></p>
// <p><button class="px2-btn px2-btn--block px2-btn--sm">Default Button</button></p>
// <p><button class="px2-btn px2-btn--block">Default Button</button></p>
// <p><button class="px2-btn px2-btn--block px2-btn--lg">Default Button</button></p>
//
// Styleguide 2.4
.px2-btn{

	&--sm{
		font-size:0.8em;
	}
	&--lg{
		font-size:1.2em;
	}
	&--block{
		display: block;
		width: 100%;
	}

}