@import "bootstrap-sass/assets/stylesheets/bootstrap/buttons";

.btn {
	@include button-size(0, 48px, 16px, 60px, 4px);
	font-family: $font-family-secondary-semibold;
	border: 0px solid transparent;

	&,
	&:active,
	&.active {
		&:focus,
		&.focus {
			outline: none;
		}
	}

	&:active,
	&.active {
		box-shadow: none;
	}

	&.btn-block {
		padding: 0;
	}
}

.btn-default {
	@include anim(all);
	background-color: rgba($primary, .1);
	color: rgba($primary, 0.6);

	&:hover,
	&:focus,
	&.focus {
		background-color: rgba($primary, .2);
		color: rgba($primary, 0.6);
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background-color: rgba($primary, .2);
			color: rgba($primary, 0.6);
		}
	}
}

.btn-primary {
	@include anim(all);
	background-color: rgba($primary, .8);
	color: $white;

	&:hover,
	&:focus,
	&.focus {
		background-color: rgba($primary, .6);
		color: $white;
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background-color: rgba($primary, .6);
			color: $white;
		}
	}

}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary {
	background-color: rgba($primary, .8);
	color: $white;

	&:hover,
	&:focus,
	&.focus {
		background-color: rgba($primary, .8);
		color: $white;
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background-color: rgba($primary, .8);
			color: $white;
		}
	}
}

.btn-success {
	@include anim(all);
	background-color: $brand-success;
	color: $white;

	&:hover,
	&:focus,
	&.focus {
		background-color: rgba($brand-success, .8);
		color: $white;
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background-color: rgba($brand-success, .8);
			color: $white;
		}
	}
}

.btn-danger {
	@include anim(all);
	background-color: $brand-danger;
	color: $white;

	&:hover,
	&:focus,
	&.focus {
		background-color: rgba($brand-danger, .8);
		color: $white;
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background-color: rgba($brand-danger, .8);
			color: $white;
		}
	}
}

.btn-accent {
	@include anim(all);
	background-color: $accent;
	color: $white;

	&:hover,
	&:focus,
	&.focus {
		background-color: rgba($accent, .8);
		color: $white;
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background-color: rgba($accent, .8);
			color: $white;
		}
	}
}

.btn-inverse {
	@include anim(all);
	background: $white;
	color: rgba($primary, .8);

	&:hover,
	&:focus,
	&.focus {
		background: rgba($white, .15);
		color: rgba($primary, .6);
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background: rgba($white, .15);
			color: rgba($primary, .6);
		}
	}
}

.btn-inverse-accent {
	@include anim(all);
	background: $white;
	color: $accent;

	&:hover,
	&:focus,
	&.focus {
		background: rgba($white, .15);
		color: rgba($accent, .6);
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background: rgba($white, .15);
			color: rgba($accent, .6);
		}
	}
}

.btn-link {
	@include anim(all);
	background: transparent;
	color: rgba($primary, .8);

	&:hover,
	&:focus,
	&.focus {
		background: transparent;
		color: rgba($primary, .6);
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background: transparent;
			color: rgba($primary, .6);
		}
	}
}

.btn-link.disabled,
.btn-link[disabled],
fieldset[disabled] .btn-link {
	background: transparent;
	color: rgba($primary, .8);

	&:hover,
	&:focus,
	&.focus {
		background: transparent;
		color: rgba($primary, .8);
	}

	&:active,
	&.active {
		&:hover,
		&:focus,
		&.focus {
			background: transparent;
			color: rgba($primary, .8);
		}
	}
}

// Icons

.btn span[class^="icon-16-"],
.btn span[class*="icon-16-"] {
	margin-right: 10px;
	position: relative;
	top: 2px;
	color: inherit;
}

// Sizes

.btn-lg {
	@include button-size(0, 72px, 16px, 60px, 4px);
	font-weight: 400;
}

.btn-sm {
	@include button-size(0, 24px, 16px, 60px, 4px);
	font-weight: 400;
}

// Transparent

.btn-transparent {
	background: transparent;
	border: 0;
	padding: 0;
	color: rgba($primary, .6);

	&,
	&:active,
	&.active {
		&:focus,
		&.focus {
			outline: none;
			color: rgba($primary, .8);
		}
	}
}

// Icon

.btn-icon {
	@include anim(all);
	background: none;
	border: 0;
	border-radius: 50%;
	color: rgba($primary, .6);
	height: 48px;
	width: 48px;

	&.btn-squared {
		border-radius: 4px;
	}

	&:hover,
	&:focus,
	&.focus {
		color: $accent;
		background: rgba($accent, .1);
	}

	&,
	&:active,
	&.active {
		&:focus,
		&.focus {
			color: $accent;
			background: rgba($accent, .1);
			outline: none;
		}
	}
}