// Button sizes
.button-size(@height;@padding-horizontal;@font-size;){
	@line-height: 20px;
	@padding-vertical: (@height - @line-height - 2) / 2;
	padding: @padding-vertical @padding-horizontal;
	font-size: @font-size;
	line-height:@line-height;
	&.btn-outline {
		border-width: 2px;
		@padding-vertical: (@height - @line-height - 4) / 2;
		padding: @padding-vertical @padding-horizontal;
	}
}
.button-variant(@color;@background;@border;@color_hover : ''; @background_hover : ''; @border_hover : '') {
	
	@_color_hover : @color_hover;
	@_background_hover : @background_hover;
	
	& when (@_color_hover = '') {
		@color_hover : @color;
	}
	
	& when (@_background_hover = '') {
		@background_hover : @background;
	}
	
	color: @color;
	background-color: @background;
	border-color: @border;
	
	&:focus,
	&:hover {
		color: @color_hover !important;
		background-color: @background_hover;
		border-color: @border_hover;
	}
	&.disabled,
	&[disabled],
	fieldset[disabled] & {
		&:hover,
		&:focus,
		&.focus {
			background-color: @background;
			border-color: @border;
		}
	}
	
	&.btn-3d {
		top: 0;
		.box-shadow(0 5px 0 darken(@background, 10%)) !important;
		&:focus,
		&:hover {
			top: 3px;
			.box-shadow(0 2px 0 darken(@background, 10%)) !important;
			color: @color !important;
			background-color: @background !important;
			border-color: @border !important;
		}
	}
}

.wp-block-button__link,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn {
	&:extend(.heading_font);
	display: inline-block;
	&:extend(.fw-normal);
	position: relative;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	//white-space: nowrap;
	text-transform: uppercase;
	.button-size(49px, 38px, 12px);
	.user-select(none);
	.transition(all .2s ease-in-out);
	&:hover,
	&:focus,
	&.focus {
		text-decoration: none;
	}

	&:active,
	&.active {
		outline: 0;
		background-image: none;
	}

	&.disabled,
	&[disabled],
	fieldset[disabled] & {
		cursor: not-allowed;
		.opacity(.65);
	}
}

.wp-block-button__link:not(.has-background):not(.has-text-color),
input[type="submit"],
input[type="button"],
input[type="reset"] {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	.button-variant(@foreground_accent_color, @accent_color, @accent_color, #fff, #2a2d2e, #2a2d2e);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	&:hover,
	&:focus,
	&:active {
		color: #fff;
		background-color: #333;
		border-color: #333;
	}

	&.has-background,
	&.has-text-color {
		border-color: transparent;
	}
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border: 2px solid currentcolor;
	color: @accent_color;
	&:hover,
	&:focus,
	&:active {
		color: @accent_color;
	}

	&:not(.has-text-color) {
		&:hover,
		&:focus,
		&:active {
			color: #333;
		}
	}
}

a.btn {
	&.disabled,
	fieldset[disabled] & {
		pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
	}
}

.btn-block {
	display: block;
	width: 100%;
}

.btn.btn-xs {
	.button-size(36px, 22px, 11px);
}

.btn.btn-sm {
	.button-size(44px, 33px, 11px);
}

.btn.btn-md {
	.button-size(49px, 38px, 12px);
}

.btn.btn-lg {
	.button-size(52px, 43px, 11px);
}

.btn.btn-xl {
	.button-size(57px, 51px, 13px);
}

.wp-block-button:not(.is-style-squared) .wp-block-button__link,
.btn.btn-round {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

.btn.btn-rounded {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.btn.btn-inline {
	display: inline-block;
	vertical-align: top;
}

.btn.btn-icon-left > i {
	margin-right: 10px;
}

.btn.btn-icon-right > i {
	margin-left: 10px;
}

.btn.btn-primary {
	.button-variant(@foreground_accent_color, @accent_color, @accent_color, @background_color, #000, #000);
	&.btn-outline {
		.button-variant(@accent_color, transparent, @accent_color, @foreground_accent_color, @accent_color, @accent_color);
	}
}

.btn.btn-white {
	.button-variant(#333, #fff, #fff, #fff, #333, #333);
	&.btn-outline {
		.button-variant(#333, transparent, #333, #fff, #333, #333);
	}
}

.btn.btn-gray {
	.button-variant(#333, #f8f8f8, #f8f8f8, #f8f8f8, #333, #333);
	&.btn-outline {
		.button-variant(#333, transparent, #cacaca, #f8f8f8, #333, #333);
	}
}

.btn.btn-black {
	.button-variant(#fff, #000, #000, @foreground_accent_color, @accent_color, @accent_color);
	&.btn-outline {
		.button-variant(@heading_color, transparent, @heading_color, @foreground_accent_color, @accent_color, @accent_color);
	}
}
.btn-container.btn-inline {
	display: inline-block;
}