/**
 * @copyright	Copyright 2010-2013, The Titon Project
 * @license		http://opensource.org/licenses/bsd-license.php
 * @link		http://titon.io
 */

@import "../common";

/**
 *	<button type="button" class="button large round">Large Rounded Button</button>
 *	<a href="" class="button small pill">Small Pill Button</a>
 */

.button {
	@include reset-inline-block;
	cursor: pointer;
	text-align: center;
	overflow: hidden;
	font-weight: normal;
	line-height: normal; // setting it to normal allows it to match form input heights
	user-select: none;
	white-space: nowrap;
	@include size-medium;
	background: $gray;
	border: 1px solid $gray-dark;

	// Sizes
	&.small, .small & { @include size-small; }
	&.large, .large & { @include size-large; }

	// Shapes
	&.round { border-radius: $round; }
	&.pill { border-radius: $pill; }
	&.oval { border-radius: #{$oval-x} / #{$oval-y}; }
	&.skew { border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0; }

	// State
	@include disabled-state {
		cursor: not-allowed;
		pointer-events: none;
	}
}

// Reset browser styles
button::-moz-focus-inner {
	padding: 0;
	border: 0;
}