.fbtn {
	background-color: $black-bg;
	border-radius: 50%;
	clear: both;
	color: $black-text;
	cursor: pointer;
	display: block;
	font-size: $line-height;
	padding: ($line-height / 2) 0;
	position: relative;
	text-align: center;
	width: ($line-height * 2);
	@include box-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
	@include transition(all 0.3s $timing);
	-webkit-transition-property: box-shadow, opacity, -webkit-transform;
	        transition-property: box-shadow, opacity, transform;
}

a.fbtn {
	&:focus,
	&:hover {
		color: $black-text;
		@include box-shadow(0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5));
	}
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);
		
		.fbtn-#{$color} {
			background-color: nth($palette-color, $i);
			color: $white !important;
		}
	}

// size
	.fbtn-lg {
		padding: ($line-height * 0.75) 0;
		width: ($line-height * 2.5);
		.fbtn-sub {
			// position
				top: ($line-height * 0.75);
		}
		~ .fbtn-dropdown {
			min-width: ($grid-gutter * 2 + $line-height * 2.5);
		}
	}

.fbtn-container {
	position: fixed;
		right: $grid-gutter;
		bottom: $line-height;
	z-index: ($content-base + 1);
	@include backface(hidden);
	@include transition(margin-bottom 0.3s $timing, right 0.3s $timing);
}

.fbtn-dropdown {
	max-height: 0;
	overflow: hidden;
	padding-right: $grid-gutter;
	padding-left: $grid-gutter;
	position: absolute;
		right: ($grid-gutter * -1);
		bottom: 100%;
	@include transition(max-height 0s 0.5s);
	.fbtn-inner.open & {
		max-height: 99999px;
		overflow: visible;
		@include transition(max-height 0s);
	}
	.fbtn {
		margin: ($line-height / 2) auto;
		@include opacity(0);
		@include transform(scale(0.5));
		&:nth-last-child(1) {
			-webkit-transition-delay: 300ms;
			        transition-delay: 300ms;
		}
		&:nth-last-child(2) {
			-webkit-transition-delay: 250ms;
			        transition-delay: 250ms;
		}
		&:nth-last-child(3) {
			-webkit-transition-delay: 200ms;
			        transition-delay: 200ms;
		}
		&:nth-last-child(4) {
			-webkit-transition-delay: 150ms;
			        transition-delay: 150ms;
		}
		&:nth-last-child(5) {
			-webkit-transition-delay: 100ms;
			        transition-delay: 100ms;
		}
		&:nth-last-child(6) {
			-webkit-transition-delay: 50ms;
			        transition-delay: 50ms;
		}
		.fbtn-inner.open & {
			@include opacity(1);
			@include transform(scale(1));
			-webkit-transition-delay: 300ms;
			        transition-delay: 300ms;
			&:nth-last-child(1) {
				-webkit-transition-delay: 0s;
				        transition-delay: 0s;
			}
			&:nth-last-child(2) {
				-webkit-transition-delay: 50ms;
				        transition-delay: 50ms;
			}
			&:nth-last-child(3) {
				-webkit-transition-delay: 100ms;
				        transition-delay: 100ms;
			}
			&:nth-last-child(4) {
				-webkit-transition-delay: 150ms;
				        transition-delay: 150ms;
			}
			&:nth-last-child(5) {
				-webkit-transition-delay: 200ms;
				        transition-delay: 200ms;
			}
			&:nth-last-child(6) {
				-webkit-transition-delay: 250ms;
				        transition-delay: 250ms;
			}
		}
	}
}

.fbtn-ori,
.fbtn-sub {
	@include transition(all 0.3s $timing);
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity, transform;
}

.fbtn-ori {
	.fbtn-inner.open & {
		@include opacity(0);
		@include transform(rotate(225deg));
	}
}

.fbtn-rotate {
	@include transition(all 0.3s $timing);
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity, transform;
	.fbtn-inner.open & {
		@include transform(rotate(225deg));
	}
}

.fbtn-sub {
	position: absolute;
		top: ($line-height / 2);
		left: 0;
	text-align: center;
	width: 100%;
	@include opacity(0);
	@include transform(rotate(-225deg));
	.fbtn-inner.open & {
		@include opacity(1);
		@include transform(rotate(0));
	}
}

.fbtn-text {
	background-color: $black-text;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 2px;
	color: $white;
	font-size: $font-size-h6;
	height: 0;
	margin-top: ($line-height / -2);
	margin-right: $grid-gutter;
	overflow: hidden;
	padding-right: ($grid-gutter / 2);
	padding-left: ($grid-gutter / 2);
	position: absolute;
		top: 50%;
		right: 100%;
	white-space: nowrap;
	width: 0;
	@include opacity(0);
	@include transition(opacity 0.3s $timing);
	// touch & no touch
		.no-touch .fbtn:hover & {
			height: auto;
			width: auto;
			@include opacity(1);
		}
		.no-touch .fbtn-dropdown .fbtn:hover & {
			height: 0;
			width: 0;
			@include opacity(0);
		}
		.no-touch .fbtn-inner.open .fbtn-dropdown .fbtn:hover & {
			height: auto;
			width: auto;
			@include opacity(1);
		}
		.touch & {
			display: none;
			height: auto;
			width: auto;
			@include opacity(1);
		}
		.touch .fbtn-inner.open & {
			display: block;
		}
}