hazmat-suite/src-ui/scss/custom/_buttons.scss

// CUSTOM Button Sizes

.btn.w-100:has(+.btn) {
  margin-bottom: 3px;
}

.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;
      margin-top: calc(calc($btn-hero-iconed-padding-top + $btn-border-width)*-1);
      margin-bottom: calc(calc($btn-hero-iconed-padding-bottom + $btn-border-width)*-1);
      margin-left: calc($btn-hero-padding-x);
      margin-right: calc(calc($btn-hero-padding-x + $btn-border-width)*-1);
		width: 4em;
	}

	&.btn-iconed-left .btn-icon {
		order: -1;
		justify-self: flex-start;
        margin-left: calc(calc($btn-hero-padding-x + $btn-border-width)*-1);
        margin-right: calc($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;
    --#{$prefix}btn-icon-bg: transparent;
    --#{$prefix}btn-icon-color: inherit;
	
}

.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-top: calc(calc($btn-iconed-padding-top + $btn-border-width)*-1);
    margin-bottom: calc(calc($btn-iconed-padding-bottom + $btn-border-width)*-1);
    margin-left: calc($btn-padding-x);
    margin-right: calc(calc($btn-padding-x + $btn-border-width)*-1);
    color: var(--#{$prefix}btn-icon-color);
    @include gradient-bg(var(--#{$prefix}btn-icon-bg));
    @include transition($btn-transition);
    @include box-shadow(var(--#{$prefix}btn-box-shadow));
}

.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: calc(calc($btn-padding-x-lg + $btn-border-width)*-1);
}

// iconed specific
.btn-iconed-left {
	justify-content: flex-start;
}
.btn-iconed-left .btn-icon {
	order: -1;
	justify-self: flex-start;
    margin-left: calc(calc($btn-padding-x + $btn-border-width)*-1);
    margin-right: calc($btn-padding-x);
}

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

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

.btn-iconed-anthrazit-08-primary {
	@include iconed-button-variant($antrazit05, $antrazit05 /*, $antrazit05*/, $simple: false);
    --#{$prefix}btn-color: #{$white};
    --#{$prefix}btn-hover-color: #{$white};
    --#{$prefix}btn-hover-bg: #{$primary-d-100};
	//@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);
//    @include iconed-button-variant($antrazit15, $white/*, $antrazit15*/, null, true);
//}

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