//------------------------------------------------------------------------------
// @object: Button
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.2.0
// @description
//
//------------------------------------------------------------------------------

//
// #settings

// Layout Variables
$btn-spacing: $sp1 !default;
$btn-height: $default-height !default;
$btn-border-radius: $default-border-radius !default;
$btn-min-width: 64px !default;
$btn-height: $default-height-dense !default;

// Theme Variables
$btn-background-color: $default-action-bg !default;
$btn-hover-color: $default-action-bg-hover !default;
$btn-text-color: $default-action-color !default;
$btn-text-hover-color: $default-action-color-hover !default;

//
// #scss

//
// 1. Allow us to vertically center content
// 2. Line different sized buttons up a little nicer.
// 3. Make buttons inherit font styles (often necessary when styling `input`s as
//    buttons).
// 4. Reset/normalize some styles.
// 5. Force all button-styled elements to appear clickable.
// 6. Fixes odd inner spacing in IE7.
// 7. Prevent button text from being selectable.
// 8. Prevent deafult browser outline halo
//
.o-btn {
	@include type(subhead1, $lh: 1.5, $fw: 700);
	@include shadow(2); // google material design
	@include center($btn-height);  // [1]
	text-align: center; // [4]
	text-decoration: none; // [4]
	vertical-align: middle; // [2]
	background-color: $btn-background-color;
	border: none; // google material design
	border-radius: $btn-border-radius;
	outline: none; // [8]
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // google material design
	color: $btn-text-color;
	position: relative; // google material design
	overflow: hidden; // [6]
	box-sizing: border-box;
	min-width: $btn-min-width; // google material design
	margin: 0; // [4]
	padding: ($btn-spacing * 2);
	user-select: none; // [7]
	transition:
		box-shadow 0.2s $animation-curve-fast-out-linear-in,
		background-color 0.2s $default-animation-curve,
		color 0.2s $default-animation-curve;
	will-change: transform, opacity; // google material design

	&-icon {
		margin-right: $btn-spacing;
	}

	&-icon + &,
	&-text + &-icon {
		margin-right: 0;
		margin-left: $btn-spacing;
	}

	// UI states
	&:active {
		outline: none;
	}

	&:hover {
		text-decoration: none;  // [4]
		background-color: $btn-hover-color;
		color: $btn-text-hover-color;
		cursor: pointer;
	}

	&:focus {
		@include shadow(4);
		outline: none; // [8]
	}

	&:disabled {
		@include shadow(0);
		background-color: transparent;
		box-shadow: none;
		cursor: default;
		pointer-events: none;
	}

	// Remove excess padding and border in Firefox 4+
	&::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
}