// CUSTOM Button Sizes

.btn {
	transition-property: background, color, border;
}

.btn-lg {
	font-size: $font-size-lg;
}

.btn-hero {
	font-size:	1.125rem;
	padding: $btn-hero-padding-y $btn-hero-padding-x;
	&.btn-iconed {
		padding-top: $btn-hero-iconed-padding-top;
		padding-bottom: $btn-hero-iconed-padding-bottom;
	};

	&.btn-iconed > .btn-icon {
		margin-left: $btn-hero-padding-x;
		margin-top: -$btn-hero-iconed-padding-top;
		margin-bottom: -$btn-hero-iconed-padding-bottom;
		margin-right: -$btn-hero-padding-x;
		width: 4em;
	}

	&.btn-iconed-left .btn-icon {
		order: -1;
		justify-self: flex-start;
		margin-left: -$btn-hero-padding-x;
		margin-right: $btn-hero-padding-x;
	}
}

.btn-iconed {
	justify-content: space-between;
	display: inline-flex;
	align-items: center;
	font-weight: bold;
	position: relative;
	white-space: normal;
	text-align: left;
	padding-top: $btn-iconed-padding-top;
	padding-bottom: $btn-iconed-padding-bottom;
	
}

.btn-iconed > .btn-icon {
	align-self: stretch;
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: flex-end;
	width: 2.25em;
	margin-left: $btn-padding-x;
	margin-top: -$btn-iconed-padding-top;
	margin-bottom: -$btn-iconed-padding-bottom;
	margin-right: -$btn-padding-x;
}

.btn-iconed > .btn-icon:before {
	margin-top: -0.1em;
}

.btn-iconed .btn-icon.ifc-add:before {
	font-size: 1.2em;
}

.btn-lg .btn-icon {
	width: 2.1em;
	margin-right: -$btn-padding-x-lg;
}

// iconed specific
.btn-iconed-left {
	justify-content: flex-start;
}
.btn-iconed-left .btn-icon {
	order: -1;
	justify-self: flex-start;
	margin-left: -$btn-padding-x;
	margin-right: $btn-padding-x;
}

//iconed Buttons
.btn-iconed-default {
	@include iconed-button-variant($body-color, $antrazit15, $antrazit25);
}

.btn-iconed-default-white {
	@include iconed-button-variant($white, $antrazit25, $antrazit40);
}

.btn-iconed-anthrazit-08-primary {
	@include iconed-button-variant($primary-d-100, $antrazit05, $antrazit05, null, false, $primary, $antrazit08);

	@include hover-focus() {
		background: $primary;
		color: $white;
		>.btn-icon {
			background: $primary-d-100;
			color: $white;
		}
	}

	&.active {
		background: $primary;
		color: $white;
		>.btn-icon {
			background: $primary-d-100;
			color: $white;
		}
	}
}

.btn-iconed-simple {
	@include iconed-button-variant($white, $antrazit15, $antrazit15, null, true);
}

.btn-iconed-primary {
	@include iconed-button-variant($white, $btn-primary-bg, $btn-primary-bg);
}