@btnColor: #1e1e1e;
@btnColorHover: #dd0202;
@btnBackground: transparent;
@btnBackgroundHover: transparent;
@btnBorderRadius: 0;
@FontFamily: 'Roboto', sans-serif;
@text-transform: uppercase;
@letter-spacing: 0;
@padding: 0;
@text-shadow: none;

.transition {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
     -moz-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.font {
	font: 900 17px/1.1em @FontFamily;
}

*:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.btn,
.reply a {
	border: none;
	color: @btnColor;
	text-decoration: none;
	background: @btnBackground;
	cursor: pointer;
	padding: 0;
	display: inline-block;
	text-transform: @text-transform;
	border-radius: @btnBorderRadius;
	outline: none;
	box-shadow: none;
	text-shadow: @text-shadow;
	position: relative;
	letter-spacing: @letter-spacing;
	.transition;
	.font;

	> span {
		position: relative;
		z-index: 100;
		display: inline-block;
		vertical-align: baseline;
		padding: @padding;

		&:before {
			bottom: auto;
			top: 0;
		}
		&:after {
			content: '';
			width: 100%;
			height: 1px;
			background: @btnColor;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 10;
			opacity: 1;
			.transition;
		}
	}
	&:hover,
	&:active {
		color: @btnColorHover;
		background: @btnBackgroundHover;
		border-color: @btnColorHover;
		box-shadow: none;

		> span {
			&:after {
				background: @btnColorHover;
			}
		}
	}
	&:focus {
		color: @btnColor;
		background: @btnBackground;
		border-color: @btnColor;
	}
}
.input-btn {
	padding: 0;
	
	> span {
		display: inline-block;
		padding-bottom: 0;
		vertical-align: baseline;
		position: relative;
	}
	input {
		display: block;
		border: none;
		background: none;
		color: @btnColor;
		z-index: 100;
		padding: @padding !important;
		margin: 0;
		position: relative;
		height: auto;
		text-transform: inherit;
		.font;
		.transition;
	}
	&:hover,
	&:active {
		input {
			color: @btnColorHover !important;
			background: none;
			border-color: @btnColorHover;
			box-shadow: none;
		}
	}
	&:focus {
		input {
			color: @btnColor;
			background: none;
			border-color: @btnColor;
		}
	}	
}
.btn-from-top {
	&:before {
		content: '';
		width: 100%;
		height: 0;
		top: 0;
		left: 0;
		z-index: 10;
		position: absolute;
		background: @btnBackgroundHover;
		border-radius: @btnBorderRadius;
		.transition;
	}
	&:hover {
		background: @btnBackground;
		color: @btnColorHover;

		&:before {
			height: 100%;
			background: @btnBackgroundHover;
		}
	}
}
.btn-from-bottom {
	&:before {
		content: '';
		width: 100%;
		height: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		position: absolute;
		background: @btnBackgroundHover;
		border-radius: @btnBorderRadius;
		.transition;
	}
	&:hover {
		background: @btnBackground;
		color: @btnColorHover;

		&:before {
			height: 100%;
			background: @btnBackgroundHover;
		}
	}
}
.btn-from-left {
	&:before {
		content: '';
		width: 0;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 10;
		position: absolute;
		background: @btnBackgroundHover;
		border-radius: @btnBorderRadius;
		.transition;
	}
	&:hover {
		background: @btnBackground;
		color: @btnColorHover;

		&:before {
			width: 100%;
			background: @btnBackgroundHover;
		}
	}
}
.btn-from-right {
	&:before {
		content: '';
		width: 0;
		height: 100%;
		top: 0;
		right: 0;
		z-index: 10;
		position: absolute;
		background: @btnBackgroundHover;
		border-radius: @btnBorderRadius;
		.transition;
	}
	&:hover {
		background: @btnBackground;
		color: @btnColorHover;

		&:before {
			width: 100%;
			background: @btnBackgroundHover;
		}
	}
}
.btn-from-center-vertical,
.btn-from-center-horizontal,
.btn-to-center-vertical,
.btn-to-center-horizontal,
.btn-from-center-in-sides {
	overflow: hidden;

	&:before,
	&:after {
		content: '';
		position: absolute;
		background: @btnBackgroundHover;
		.transition;
	}
}
.btn-from-center-vertical {	
	background: @btnBackgroundHover;

	&:before,
	&:after {
		width: 55%;
		top: 0;
		height: 100%;
		background: @btnBackground;
	}
	&:before {
		left: 0;		
	}
	&:after {
		right: 0;
	}
	&:hover {
		&:before,
		&:after {
			width: 0;
		}
	}
}
.btn-from-center-horizontal {
	background: @btnBackgroundHover;

	&:before,
	&:after {
		background: @btnBackground;
		width: 100%;
		left: 0;
		height: 55%;
	}
	&:before {
		top: 0;
	}
	&:after {
		bottom: 0;
	}
	&:hover {
		&:before,
		&:after {
			height: 0;
		}
	}
}
.btn-to-center-horizontal {
	&:before,
	&:after {
		height: 0;
		left: 0;
		width: 100%;
	}
	&:before {
		top: 0;
	}
	&:after {
		bottom: 0;
	}
	&:hover {
		&:before,
		&:after {
			height: 50%;
		}
	}
}
.btn-to-center-vertical {
	&:before,
	&:after {
		width: 0;
		top: 0;
		height: 100%;
	}
	&:before {
		left: 0;
	}
	&:after {
		right: 0;
	}
	&:hover {
		&:before,
		&:after {
			width: 50%;
		}
	}
}
.btn-from-center-in-sides {
	padding: @padding;
	background: @btnBackground;

	&:before {
		content: '';
		width: 100%;
		height: 100%;
		background: @btnBackgroundHover;
		border-radius: @btnBorderRadius;
		position: absolute;
		top: 0;
		left: 0;
		.scale(0);
	}
	&:hover,
	&:active {
		background: @btnBackground;

		&:before {
			.scale(1.2);
		}
	}
}
.btn-only-text-line-from-left {
	padding: 0;
	border: none;
	transition: 400ms color ease;

	span {
		padding: 1px 0;
		display: block;

		&:before {
			content: '';
			width: 0;
			height: 1px;
			background: @btnColor;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 100;
			opacity: 1;
			.transition;
		}
	}
	&.input-btn {
		> span {
			padding: 0;
		}
		input {
			display: block;
			height: 100%;
		}
	}
	&:hover,
	&:active {
		color: @btnColorHover;

		span {
			&:before {
				width: 100%;
				background: @btnColorHover;
			}
		}
	}
}
.btn-only-text-two-lines-from-left {
	padding: 0;
	border: none;
	transition: 400ms color ease;

	span {
		padding: 2px 0;
		display: inline-block;

		&:before {
			content: '';
			width: 0;
			height: 1px;
			background: @btnColor;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			opacity: 1;
			.transition;
		}
		&:after {
			content: '';
			width: 0;
			height: 1px;
			background: @btnColor;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
			opacity: 1;
			.transition;
		}
	}
	&.input-btn {
		> span {
			padding: 0;
		}
		input {
			display: block;
			height: 100%;
		}
	}
	&:hover,
	&:active {
		color: @btnColorHover;

		span {
			&:before,
			&:after {
				width: 100%;
				background: @btnColorHover;
			}
		}
	}
}