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

// CUSTOM Button Sizes

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

.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;
    --#{$prefix}btn-icon-hover-bg: transparent;
	
}


.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));
  }
    &:hover > .btn-icon {
      color: var(--#{$prefix}btn-icon-hover-color);
      background-color: var(--#{$prefix}btn-icon-hover-bg);
  }
}


.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(false, $antrazit15, $antrazit15, $body-color, $body-color,
            $antrazit25,
            $antrazit25,
            $antrazit25);
  //--#{$prefix}btn-color: #{$body-color};
}

.btn-iconed-default-white {
	@include iconed-button-variant(false, $antrazit25, $antrazit25, $white, $white,
            shade-color($antrazit25, $btn-hover-bg-shade-amount),
            shade-color($antrazit25, $btn-hover-bg-shade-amount),
            shade-color($antrazit25, $btn-hover-bg-shade-amount),
            $white);
}

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

.btn-iconed-simple {
	//@include iconed-button-variant($white, $antrazit15/*, $antrazit15*/, null, true);
    @include iconed-button-variant(true, $antrazit15, $antrazit15, $white);
   --#{$prefix}btn-hover-color: white;
  --#{$prefix}btn-icon-hover-color: white;
}

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