.btn {
	background-color: $white;
	background-image: none;
	background-position: 50% 50%;
	background-size: 100% 100%;
	border: 1px solid transparent;
	border-radius: 2px;
	color: $black-text;
	cursor: pointer;
	display: inline-block;
	font-size: $font-size;
	font-weight: 400;
	line-height: $line-height;
	margin-bottom: 0;
	max-width: 100%;
	padding: (($btn-height - $line-height - 2) / 2) $grid-gutter;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
	@include box-shadow(0 1px 5px rgba(0, 0, 0, 0.15), 0 1px 5px rgba(0, 0, 0, 0.15));
	@include transition(all 0.45s $timing, background-color 0.3s linear 0s);
	@include user-select(none);
	&:active,
	&:focus,
	&:hover {
		color: $black-text;
		outline: 0;
		text-decoration: none;
		@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15));
	}
	&:active {
		background-color: $white-bg;
		@include transition(all 0.45s $timing, background-color 0s linear 0.45s);
	}
	&[disabled],
	fieldset[disabled] & {
		cursor: not-allowed;
		@include opacity(0.5);
	}
	&.btn-active {
		background-image: -webkit-radial-gradient(circle, $white-bg 10%, $white 11%);
		background-image:         radial-gradient(circle, $white-bg 10%, $white 11%);
		background-size: 900% 900%;
	}
}

.btn-block {
	display: block;
	white-space: normal;
	width: 100%;
}

.btn-sm {
	padding: 0 ($grid-gutter / 2);
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);
		
		.btn-#{$color} {
			background-color: nth($palette-color, $i);
			color: $white;
			&:active,
			&:focus,
			&:hover {
				color: $white;
			}
			&:active {
				background-color: nth($palette-color-light-m, $i);
			}
			&[disabled],
			fieldset[disabled] & {
				background-color: nth($palette-color, $i);
			}
			&.btn-active {
				background-image: -webkit-radial-gradient(circle, nth($palette-color-light-m, $i) 10%, nth($palette-color, $i) 11%);
				background-image:         radial-gradient(circle, nth($palette-color-light-m, $i) 10%, nth($palette-color, $i) 11%);
			}
		}
	}

// flat
	.btn-flat {
		background-color: transparent;
		@include box-shadow(none);
		&[disabled],
		fieldset[disabled] & {
			color: $black-text;
		}
	}
	
	// flat colour
		@each $color in $palette-list {
			$i: index($palette-list, $color);

			.btn-flat.btn-#{$color} {
				color: nth($palette-color, $i);
				&:active {
					background-color: nth($palette-color-light, $i);
				}
				&[disabled],
				fieldset[disabled] & {
					color: nth($palette-color, $i);
				}
				&.btn-active {
					background-image: -webkit-radial-gradient(circle, nth($palette-color-light, $i) 10%, $white 11%);
					background-image:         radial-gradient(circle, nth($palette-color-light, $i) 10%, $white 11%);
				}
			}
		}

// size
	.btn-sm {
		font-size: $font-size-h6;
		line-height: ($line-height - 2);
		padding-top: 0;
		padding-bottom: 0;
	}

// text
	.btn-text {
		color: $black-text;
		display: inline-block;
		font-size: $font-size;
		font-weight: 400;
		line-height: $line-height;
		padding: (($btn-height - $line-height) / 2) 0;
	}