/* #Buttons
================================================== */

.dt-form button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.dt-btn,
a.button,
button.button,
#main-slideshow .tp-button,
#main .gform_wrapper .gform_footer input.button,
#main .gform_wrapper .gform_footer input[type="submit"],
.nsu-submit,
form.mc4wp-form input[type="submit"],
div.mc4wp-form button[type="submit"],
.post-password-form input[type="submit"],
.mc4wp-form input[type="submit"],
.tml-submit-wrap input[type="submit"],
.woocommerce-widget-layered-nav-dropdown__submit {
	position: relative;
	display: inline-block;
	//border: none;
	text-decoration: none;
	white-space: nowrap;
	&:hover {
		text-decoration: none;
	}
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.full-width-btn.dt-btn {
	display: block;
	text-align: center;
	clear: both;
}

#page .btn-margin,
#page .btn-margin:last-child,
#page .dt-contact-form .dt-btn {
	margin-right: 10px;
}
#page .btn-margin-left,
#page .btn-margin-left:last-child {
	margin-left: 10px;
}
.btn-shortcode  {
	margin-bottom: 10px;
}

input[type="button"],
input[type="reset"],
.mc4wp-form input[type="submit"],
button.button,
//input.button,
.woocommerce-widget-layered-nav-dropdown__submit {
	border: none;
}

#page .btn-link {
	padding: 0;
}
.btn-link,
.dt-btn-link {
	position: relative;
	display: inline-block;
	text-decoration: none;
	white-space: nowrap;
}
.dt-btn-link.left-to-right-line:after {
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 0;
    content: "";
    transition: width 0.4s ease;
}
.dt-btn-link.left-to-right-line:hover:after {
    width: 100%;
}
.dt-btn-link {
	.flex-display(@display: inline-flex);
	.align-items(@align: center);
	.justify-content(@justify: center);
	&.full-width-btn {
		width: 100%;
		.btn-align-left &,
		&.btn-inline-left {
			.justify-content(@justify: flex-start);
		}
		.btn-align-right &,
		&.btn-inline-right {
			.justify-content(@justify: flex-end);
		}
	}
}

/* #From centre decoration style
================================================== */

	.dt-btn-link.from-center-line:after {
		position: absolute;
		visibility: hidden;
		left: 0;
		bottom: -5px;
		width: 100%;
		background-color: #000;
		content: "";
		transform: scaleX(0);
		transition: all 0.2s ease-in-out 0s;
		opacity: 0.85;
	}

	.dt-btn-link.from-center-line:hover:after {
		visibility: visible;
		transform: scaleX(1);
	}

/* #Upwards decoration style
================================================== */

.dt-btn-link.upwards-line:after {
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(0,0,0,0.1);
	content: '';
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	transform: translateY(10px);
}
.dt-btn-link.upwards-line:hover:after {
	opacity: 1;
	transform: translateY(0px);
}
/* #Downwards decoration style
================================================== */

.dt-btn-link.downwards-line:after {
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	background: #fff;
	content: '';
	opacity: 0;
	transition: height 0.3s, opacity 0.3s, transform 0.3s;
	transform: translateY(-10px);
}

.dt-btn-link.downwards-line:hover:after {
	opacity: 1;
	transform: translateY(0px);
}

/*Font icons for button*/
	.dt-btn i,
	.btn-link i,
	.dt-btn i *,
	.btn-link i * {
		color: inherit;
	}
	.dt-btn-s i,
	.dt-btn-m i {
		margin-right: 8px;
	}
	.dt-btn-l i {
		margin-right: 9px;
	}
	.dt-btn-s.ico-right-side i,
	.dt-btn-m.ico-right-side i {
		margin-right: 0px;
		margin-left: 8px;
	}
	.dt-btn-l.ico-right-side i {
		margin-right: 0px;
		margin-left: 9px;
	}

/* # Light Buttons
================================================== */
.btn-light,
.light-bg-btn,
.btn-link,
.outline-btn {
	transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.outline-bg-btn {
	transition: all 0.2s ease-out;
}

#page .btn-light:after {
	display: none;
}

/* #Outline & Outline with background on hover
================================================== */
#page .outline-bg-btn,
#page .outline-btn,
#phantom .outline-bg-btn,
#phantom .outline-btn {
	border: 2px solid;
}

/*Custom colors*/
.custom-btn-color .dt-btn > * {
	color: inherit !important;
}
.dt-btn,
.dt-btn:not(.btn-light):not(.light-bg-btn):not(.outline-btn),
.btn-link {
	&.custom-btn-hover-color:hover > span,
	&.custom-btn-hover-color:hover > .text-wrap *,
	&.custom-btn-hover-color:hover > i {
		background: none !important;
		color: inherit !important;
	}
}
.outline-element-decoration .btn-light:hover {
	box-shadow: none;
}


//Default button
.default-btn-shortcode {
	text-align: center;
	max-width: 100%;
	box-sizing: border-box;
	white-space:normal;
	&.btn-inline-center {
		margin-left: auto;
		margin-right: auto;
	}
	&.btn-inline-right {
		float: right;
	}
}
.btn-align-center {
	text-align: center;
}
.btn-align-right {
	text-align: right;
}
