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

/*vars*/
@dt-btn-bg-color-darken: darken(@dt-btn-hover-bg-color, 5%);
@dt-btn-bg-color-2-darken: darken(@dt-btn-hover-bg-color-2, 5%);
.btn-icon-gap (@var, @btn-font-size-var, @btn-font-size-div) {
	margin-right: var( ~"@{var}", calc(var(~"@{btn-font-size-var}") * 8 / ~"@{btn-font-size-div}"));
}

.btn-icon-gap-left (@var, @btn-font-size){
  margin-left: calc(~"@{var}" * 8 / ~"@{btn-font-size}");
  margin-right: 0 !important;
}
/*3D style*/

/*small button*/
.dt-btn,
.widget .dt-form .dt-btn,
.nsu-submit,
.give-btn.give-btn-reveal,
.give-submit.give-btn,
.wp-block-search .wp-block-search__button,
.wc-block-product-search .wc-block-product-search__button {
	font: var(--the7-btn-s-font);
	text-transform: var(--the7-btn-s-text-transform);
	letter-spacing: var(--the7-btn-s-letter-spacing);
	word-spacing: var(--the7-btn-s-word-spacing);
	border-radius: var(--the7-btn-s-border-radius);
	border-width: var(--the7-btn-s-border-width);
	border-style: var(--the7-btn-s-border-style);
	border-color: var(--the7-btn-border-color);
	padding: var(--the7-btn-s-padding);
    min-width: var(--the7-btn-s-min-width);
	min-height: var(--the7-btn-s-min-height);
	&.ico-right-side > i {
	    .btn-icon-gap-left (var(--the7-btn-s-font-size), 12);
	  }

	& > i,
	& > i[class^="fa"],
	& > i[class^="dt-icon"] {
		font-size: var(--the7-btn-s-icon-size);
	    .btn-icon-gap (--the7-btn-s-icon-gap, --the7-btn-s-font-size, 12);
  	}
}

.btn-link.dt-btn-s {
	font: var(--the7-btn-s-font);
}

/*middle button*/
button.button,
a.button,
input[type="reset"],
.wpcf7-submit,
.dt-btn-m,
input.dt-btn-m[type="submit"],
#main .gform_wrapper .gform_footer input.button,
#main .gform_wrapper .gform_footer input[type="submit"],
#main-slideshow .tp-button,
.woocommerce-widget-layered-nav-dropdown__submit {
	font: var(--the7-btn-m-font);
	text-transform: var(--the7-btn-m-text-transform);
	letter-spacing: var(--the7-btn-m-letter-spacing);
	word-spacing: var(--the7-btn-m-word-spacing);
	border-radius: var(--the7-btn-m-border-radius);
	border-width: var(--the7-btn-m-border-width);
	border-style: var(--the7-btn-m-border-style);
	border-color: var(--the7-btn-border-color);
	padding: var(--the7-btn-m-padding);
	min-width: var(--the7-btn-m-min-width);
	min-height: var(--the7-btn-m-min-height);
}

.dt-btn-m {
	&.ico-right-side > i {
	    .btn-icon-gap-left (var(--the7-btn-m-font-size), 14);
	  }

	& > i,
	& > i[class^="fa"],
	& > i[class^="dt-icon-"] {
	    font-size: var(--the7-btn-m-icon-size);
		.btn-icon-gap (--the7-btn-m-icon-gap, --the7-btn-m-font-size, 14);
  	}
 }

/*large button*/
.dt-btn-l {
	font: var(--the7-btn-l-font);
	text-transform: var(--the7-btn-l-text-transform);
	letter-spacing: var(--the7-btn-l-letter-spacing);
	word-spacing: var(--the7-btn-l-word-spacing);
	border-radius: var(--the7-btn-l-border-radius);
	border-width: var(--the7-btn-l-border-width);
	border-style: var(--the7-btn-l-border-style);
	border-color: var(--the7-btn-border-color);
	padding: var(--the7-btn-l-padding);
	min-width: var(--the7-btn-l-min-width);
	min-height: var(--the7-btn-l-min-height);
	&.ico-right-side > i {
	    .btn-icon-gap-left (var(--the7-btn-l-font-size), 18);
	}

	& > i,
	& > i[class^="fa"],
	& > i[class^="dt-icon-"] {
		font-size: var(--the7-btn-l-icon-size);
		.btn-icon-gap (--the7-btn-l-icon-gap, --the7-btn-l-font-size, 18);
  	}
}

/*bg style*/
.dt-btn:not(.btn-light):not(.light-bg-btn):not(.outline-btn):not(.outline-bg-btn):not(.btn-no-decoration),
.mec-event-footer .mec-booking-button,
button.button,
a.button:not(.edd-submit),
.dt-form button,
.widget .dt-form .dt-btn,
input[type="reset"],
.wpcf7-submit,
.nsu-submit,
.dt-wc-btn,
.checkout-button,
input#place_order,
input[name="apply_coupon"],
input[name="login"],
button[name="calc_shipping"],
button[name="calc_shipping"]:hover,
.single_add_to_cart_button.button,
.button.wc-backward,
.woocommerce-Button.button,
.woocommerce-button.button,
.woocommerce-Reviews .submit,
.woocommerce-Button[name="register"],
.woocommerce-button[name="register"],
.track_order input[name="track"],
.cart-btn-below-img .woo-buttons a,
input[name="save_address"],
.wc-layout-list .woo-buttons a,
.post-password-form input[type="submit"],
.mc4wp-form input[type="submit"],
div.mc4wp-form button[type="submit"],
.tml-submit-wrap input[type="submit"],
.wpcf7-form input[type="submit"],
input[type="submit"]:not([name="update_cart"]),
.woocommerce-widget-layered-nav-dropdown__submit,
.give-btn.give-btn-reveal,
.give-submit.give-btn,
.wp-block-search .wp-block-search__button,
.wc-block-product-search .wc-block-product-search__button {
    transition: all 0.3s ease-out;
	box-shadow: var(--the7-btn-shadow);
	&:hover {
		box-shadow: var(--the7-btn-shadow-hover);
	}
}

/*bg style for material effect in shortcodes */
.dt-btn:not(.btn-light):not(.light-bg-btn):not(.outline-btn):not(.outline-bg-btn):not(.btn-no-decoration) {
	.btn-shadow& {
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
		&:hover {
			box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
		}
	}
	.btn-3d& {
		box-shadow: 0px 2px 0px 0px desaturate(darken(@dt-btn-bg-color, 12%), 20%);
		transition: none;
		&:hover {
			box-shadow: 0px 2px 0px 0px desaturate(darken(@dt-btn-hover-bg-color, 12%), 20%);
		}
		/*&.accent-btn-bg-color {
			//border-bottom-color: desaturate(darken(@accent-bg-color, 12%), 20%);
			box-shadow: 0px 2px 0px 0px desaturate(darken(@accent-bg-color, 12%), 20%);
		}
		&.accent-btn-bg-hover-color:hover {
			//border-bottom-color: desaturate(darken(@accent-bg-color, 12%), 20%) !important;
			box-shadow: 0px 2px 0px 0px desaturate(darken(@accent-bg-color, 12%), 20%);
		}*/
	}
}

	/* #standard buttons color & background
    ================================================== */

.mec-event-footer .mec-booking-button,
//.wp-block-search .wp-block-search__button,
.dt-form button,
#page .widget .dt-form .dt-btn,
.widget .dt-form .dt-btn,
input[type="reset"],
.wpcf7-submit,
.nsu-submit,
.dt-wc-btn,
input#place_order,
.woocommerce-Reviews .submit:not(.box-button),
input.button,
input[name="save_address"],
.wc-layout-list .woo-buttons a,
.post-password-form input[type="submit"],
.mc4wp-form input[type="submit"],
div.mc4wp-form button[type="submit"],
.tml-submit-wrap input[type="submit"],
.wpcf7-form input[type="submit"],
input[type="submit"]:not([name="update_cart"]),
.woocommerce-widget-layered-nav-dropdown__submit,
.give-btn.give-btn-reveal,
.give-submit.give-btn,
.wc-block-filter-submit-button {
	color: var(--the7-btn-color);
	.stripe &,
	& *,
	.sidebar &,
	.sidebar .widget &,
	.sidebar-content .widget &,
	.footer & {
		color: var(--the7-btn-color);
		.custom-mixin-footer-with-accent-color (@dt-btn-color, @widget-footer-accent-color);
	}
	.css-var-background("--the7-btn-bg", @startColor: @dt-btn-bg-color, @endColor: @dt-btn-bg-color-2);
	&:not(:hover) {
		.btn-bg-off & {
			background: none;
		}
	}
	&:hover > *,
	&:hover {
		color: var(--the7-btn-hover-color);
		.stripe &,
		& *,
		.sidebar &,
		.sidebar .widget &,
		.sidebar-content .widget &,
		.footer & {
			color: var(--the7-btn-hover-color);
			.custom-mixin-footer-with-accent-color (@dt-btn-hover-color, @widget-footer-accent-color);
		}
	}
	&:hover {
		border-color:var(--the7-btn-border-hover-color);
		#page &,
		.tinv-modal & {
			.css-var-background("--the7-btn-hover-bg", @dt-btn-hover-bg-color, @dt-btn-hover-bg-color-2);
		}
		.btn-hover-bg-off #page & {
			background: none;
		}
	}
	&:hover .text-wrap {
		color: var(--the7-btn-hover-color);
	}
}
.wc-block-product-search .wc-block-product-search__button,
.wp-block-search .wp-block-search__button,
button.button,
.cart-btn-below-img .woo-buttons a,
a.button:not(.edd-submit) {
	color: var(--the7-btn-color);
	.stripe &,
	& *,
	.sidebar &,
	.sidebar .widget &,
	.sidebar-content .widget &,
	.footer & {
		color: var(--the7-btn-color);
		.custom-mixin-footer-with-accent-color (@dt-btn-color, @widget-footer-accent-color);
	}
	.css-var-background("--the7-btn-bg", @startColor: @dt-btn-bg-color, @endColor: @dt-btn-bg-color-2);
	&:not(:hover) {
		.btn-bg-off & {
			background: none;
		}
	}
	&:hover > *,
	&:hover {
		color: var(--the7-btn-hover-color);
	}
	&:hover {
		border-color: var(--the7-btn-border-hover-color);
		.stripe &,
		& *,
		.sidebar &,
		.sidebar .widget &,
		.sidebar-content .widget &,
		.footer & {
			color: var(--the7-btn-hover-color);
			.custom-mixin-footer-with-accent-color (@dt-btn-hover-color, @widget-footer-accent-color);
		}
		.css-var-background("--the7-btn-hover-bg", @dt-btn-hover-bg-color, @dt-btn-hover-bg-color-2);

		.btn-hover-bg-off & {
			background: none;
		}
	}
	&:hover .text-wrap {
		color: var(--the7-btn-hover-color);
	}
}
button.button.tinvwl-add-to-cart:hover > * {
	color: inherit;
}
/* # DT Custom buttons
================================================== */


.dt-btn:not(.btn-light):not(.light-bg-btn):not(.outline-btn):not(.outline-bg-btn):not(.btn-custom-style),
.mec-event-footer .mec-booking-button,
.give-btn.give-btn-reveal,
.give-submit.give-btn {
	.css-var-background("--the7-btn-bg", @startColor: @dt-btn-bg-color, @endColor: @dt-btn-bg-color-2);
	&:not(:hover) {
		.btn-bg-off & {
			background: none;
		}
	}
	&:hover {
		background: none;
		.css-var-background("--the7-btn-hover-bg", @dt-btn-hover-bg-color, @dt-btn-hover-bg-color-2);
		border-color: var(--the7-btn-border-hover-color);
		.btn-hover-bg-off & {
			background: none;
		}
	}
	/*accent background*/
	&.accent-btn-bg-color {
		background: var(--the7-accent-color);
		.accent-gradient & {
			.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
	}
	/*accent hover background*/
	&.accent-btn-bg-hover-color:hover {
		#page & {
			background: var(--the7-accent-color);
		}
		.accent-gradient #page & {
			.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
	}
	&.default-btn-bg-hover-color:hover {
		#page & {
			background: none;
			.css-var-background("--the7-btn-hover-bg", @dt-btn-hover-bg-color, @dt-btn-hover-bg-color-2);
		}
	}
}
.btn-light:hover,
.outline-bg-btn:hover {
	.css-var-background("--the7-btn-hover-bg", @dt-btn-hover-bg-color, @dt-btn-hover-bg-color-2);
}
.dt-btn.btn-hover-off:hover {
	.css-var-background-important("--the7-btn-bg", @startColor: @dt-btn-bg-color, @endColor: @dt-btn-bg-color-2);
}

/*button text color*/
.dt-btn:not(.btn-custom-style),
.btn-link {
	color: var(--the7-btn-color);
	& *,
	.sidebar &,
	.content .sidebar-content &,
	.footer &,
	.content .shortcode-banner-inside & *,
	.content &,
	.content .elementor-widget[class*='elementor-widget-wp-widget-'] & {
		color: var(--the7-btn-color);
	}
	&:hover,
	&:hover > * {
		color: var(--the7-btn-hover-color);

		.content .elementor-widget[class*='elementor-widget-wp-widget-'] & {
			color: var(--the7-btn-hover-color);
		}
	}
	&.accent-btn-color > span,
	&.accent-btn-color > .text-wrap *,
	&.accent-btn-color > i[class^="fa"],
	&.accent-btn-color > i[class^="dt-icon-"] {
		color: var(--the7-accent-color);
		.accent-gradient & {
			.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-text-color-2);
		}
	}
	&.title-btn-color,
	&.title-btn-color > span,
	&.title-btn-color > .text-wrap *,
	&.title-btn-color > i[class^="fa"],
	&.title-btn-color > i[class^="dt-icon-"] {
		.color-title;
	}
	&.title-btn-hover-color:hover > span,
	&.title-btn-hover-color:hover > .text-wrap *,
	&.title-btn-hover-color:hover > i[class^="fa"],
	&.title-btn-hover-color:hover > i[class^="dt-icon-"] {
		color: var(--the7-h1-color) !important;
	}
	&.default-btn-hover-color:hover > span,
	&.default-btn-hover-color:hover > .text-wrap *,
	&.default-btn-hover-color:hover > i[class^="fa"],
	&.default-btn-hover-color:hover > i[class^="dt-icon-"] {
		color: var(--the7-btn-hover-color) !important;
	}
	&.accent-btn-hover-color:hover > span,
	&.accent-btn-hover-color:hover > .text-wrap *,
	&.accent-btn-hover-color:hover > i[class^="fa"],
	&.accent-btn-hover-color:hover > i[class^="dt-icon-"] {
		#page & {
			color: var(--the7-accent-color) !important;
		}
		.accent-gradient #page & {
			.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-text-color-2);
		}
	}
}
.dt-btn:not(.custom-btn-color):not(.btn-shortcode):not(.btn-custom-style) > span,
.dt-btn:not(.custom-btn-color):not(.btn-shortcode):not(.btn-custom-style) > .text-wrap * {
	.accent-btn-color & {
		color: var(--the7-accent-color);
	}
	.accent-btn-color.accent-gradient & {
		.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-text-color-2);
	}
}
.custom-btn-hover-color .dt-btn:not(.custom-btn-color):not(.accent-btn-hover-color):not(.btn-shortcode):hover > span,
.custom-btn-hover-color .dt-btn:not(.custom-btn-color):not(.accent-btn-hover-color):not(.btn-shortcode):hover > .text-wrap * {
	background: none;
	color: var(--the7-btn-hover-color);
}
.custom-btn-hover-color .dt-btn:hover > .text-wrap * {
	color: inherit;
}
.dt-btn:not(.custom-btn-hover-color):not(.btn-shortcode):not(.btn-custom-style):hover > span,
.dt-btn:not(.custom-btn-hover-color):not(.btn-shortcode):not(.btn-custom-style):hover > .text-wrap * {
	.accent-btn-hover-color & {
		color: var(--the7-accent-color);
	}
	.accent-btn-hover-color.accent-gradient & {
		.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-text-color-2);
	}
}

/* #Light Buttons
================================================== */
.light-bg-btn {
	.solid-bg-mixin;
	.outline-decoration;
	.shadow-decoration;
	&:hover {
		.css-var-background("--the7-btn-hover-bg", @dt-btn-hover-bg-color, @dt-btn-hover-bg-color-2);
	}
	&.accent-btn-bg-hover-color:hover {
		#page & {
			background: var(--the7-accent-color);
		}
		.accent-gradient #page & {
			.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
	}

}
/* #Link with background Buttons
================================================== */

.btn-light {
	.solid-bg-mixin;
	.outline-decoration;
	.shadow-decoration;
	background-image: none;
	&:hover {
		background-image: none;
		.solid-bg-mixin;
		.outline-decoration;
		.shadow-decoration;
	}
}
/* #Outline with background on hover
================================================== */
.dt-btn.outline-bg-btn {
	background: none;
	.accent-gradient & {
		background: none;
	}
	&:hover {
		border-color: transparent;
	}
}
.outline-bg-btn {
	border-color: var(--the7-btn-bg-color);
	&:hover {
		border-color: var(--the7-btn-hover-bg-color);
		.css-var-background("--the7-btn-hover-bg", @dt-btn-hover-bg-color, @dt-btn-hover-bg-color-2);
	}
	&.accent-btn-bg-color {
		border-color: var(--the7-accent-color);
	}
	&.accent-btn-bg-hover-color:hover {
		#page & {
			background: var(--the7-accent-color);
			border-color: transparent;
		}
		.accent-gradient #page & {
			.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
	}
}
/* #Outline button
================================================== */
.outline-btn {
	border-color: var(--the7-btn-bg-color);
	&:hover {
		border-color: var(--the7-btn-hover-bg-color);
		background: none;
	}
	&.accent-btn-bg-color {
		border-color: var(--the7-accent-color);
	}
	&.accent-btn-bg-hover-color:hover {
		#page & {
			border-color: var(--the7-accent-color);
		}
	}
}
.dt-btn-link,
.dt-btn-link > span,
.dt-btn-link > i {
	color: var(--the7-accent-color);
	.accent-gradient & {
		.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-text-color-2);
	}
}
.dt-btn-link:after {
	background: var(--the7-accent-color);
	.accent-gradient & {
		.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
	}
}