upgrade bs from 4.6 to v5.x - readme updated

assets/css/style.css

@@ -6,8 +6,8 @@
  */
 @font-face {
   font-family: "icomoon";
-  src: url("../fonts/icomoon.eot?ugtl3hq");
-  src: url("../fonts/icomoon.eot?ugtl3hq#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?ugtl3hq") format("truetype"), url("../fonts/icomoon.woff?ugtl3hq") format("woff"), url("../fonts/icomoon.svg?ugtl3hq#icomoon") format("svg");
+  src: url("../fonts/icomoon.eot?ugtl4m2");
+  src: url("../fonts/icomoon.eot?ugtl4m2#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?ugtl4m2") format("truetype"), url("../fonts/icomoon.woff?ugtl4m2") format("woff"), url("../fonts/icomoon.svg?ugtl4m2#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -831,7 +831,6 @@ progress {
   background-color: var(--bs-body-bg);
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
-  box-shadow: var(--bs-box-shadow-sm);
   max-width: 100%;
   height: auto;
 }
@@ -2341,7 +2340,6 @@ progress {
   background-clip: padding-box;
   border: var(--bs-border-width) solid #CACACA;
   border-radius: var(--bs-border-radius);
-  box-shadow: var(--bs-box-shadow-inset);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2360,7 +2358,7 @@ progress {
   background-color: var(--bs-body-bg);
   border-color: rgb(204, 127.5, 204);
   outline: 0;
-  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(153, 0, 153, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(153, 0, 153, 0.25);
 }
 .form-control::-webkit-date-and-time-value {
   min-width: 85px;
@@ -2495,7 +2493,6 @@ textarea.form-control-lg {
   background-size: 16px 12px;
   border: var(--bs-border-width) solid #CACACA;
   border-radius: var(--bs-border-radius);
-  box-shadow: var(--bs-box-shadow-inset);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2506,7 +2503,7 @@ textarea.form-control-lg {
 .form-select:focus {
   border-color: rgb(204, 127.5, 204);
   outline: 0;
-  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(153, 0, 153, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(153, 0, 153, 0.25);
 }
 .form-select[multiple], .form-select[size]:not([size="1"]) {
   padding-right: 0.75rem;
@@ -2697,7 +2694,6 @@ textarea.form-control-lg {
   background-color: #990099;
   border: 0;
   border-radius: 1rem;
-  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2716,7 +2712,6 @@ textarea.form-control-lg {
   background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
-  box-shadow: var(--bs-box-shadow-inset);
 }
 .form-range::-moz-range-thumb {
   width: 1rem;
@@ -2725,7 +2720,6 @@ textarea.form-control-lg {
   background-color: #990099;
   border: 0;
   border-radius: 1rem;
-  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2744,7 +2738,6 @@ textarea.form-control-lg {
   background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
-  box-shadow: var(--bs-box-shadow-inset);
 }
 .form-range:disabled {
   pointer-events: none;
@@ -2973,7 +2966,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
   border-color: var(--bs-form-valid-border-color);
-  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
 }
 
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
@@ -2992,7 +2985,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
   border-color: var(--bs-form-valid-border-color);
-  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
 }
 
 .was-validated .form-control-color:valid, .form-control-color.is-valid {
@@ -3063,7 +3056,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
   border-color: var(--bs-form-invalid-border-color);
-  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
 
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
@@ -3082,7 +3075,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
   border-color: var(--bs-form-invalid-border-color);
-  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
 
 .was-validated .form-control-color:invalid, .form-control-color.is-invalid {
@@ -3144,7 +3137,6 @@ textarea.form-control-lg {
   border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
   border-radius: var(--bs-btn-border-radius);
   background-color: var(--bs-btn-bg);
-  box-shadow: var(--bs-btn-box-shadow);
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -3168,24 +3160,23 @@ textarea.form-control-lg {
   background-color: var(--bs-btn-hover-bg);
   border-color: var(--bs-btn-hover-border-color);
   outline: 0;
-  box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow);
+  box-shadow: var(--bs-btn-focus-box-shadow);
 }
 .btn-check:focus-visible + .btn {
   border-color: var(--bs-btn-hover-border-color);
   outline: 0;
-  box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow);
+  box-shadow: var(--bs-btn-focus-box-shadow);
 }
 .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
   color: var(--bs-btn-active-color);
   background-color: var(--bs-btn-active-bg);
   border-color: var(--bs-btn-active-border-color);
-  box-shadow: var(--bs-btn-active-shadow);
 }
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
-  box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow);
+  box-shadow: var(--bs-btn-focus-box-shadow);
 }
 .btn-check:checked:focus-visible + .btn {
-  box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow);
+  box-shadow: var(--bs-btn-focus-box-shadow);
 }
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
@@ -3193,7 +3184,6 @@ textarea.form-control-lg {
   background-color: var(--bs-btn-disabled-bg);
   border-color: var(--bs-btn-disabled-border-color);
   opacity: var(--bs-btn-disabled-opacity);
-  box-shadow: none;
 }
 
 .btn-primary {
@@ -3611,7 +3601,6 @@ textarea.form-control-lg {
   background-clip: padding-box;
   border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
   border-radius: var(--bs-dropdown-border-radius);
-  box-shadow: var(--bs-dropdown-box-shadow);
 }
 .dropdown-menu[data-bs-popper] {
   top: 100%;
@@ -4162,7 +4151,6 @@ textarea.form-control-lg {
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
-    box-shadow: none;
     transition: none;
   }
   .navbar-expand-sm .offcanvas .offcanvas-header {
@@ -4210,7 +4198,6 @@ textarea.form-control-lg {
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
-    box-shadow: none;
     transition: none;
   }
   .navbar-expand-md .offcanvas .offcanvas-header {
@@ -4258,7 +4245,6 @@ textarea.form-control-lg {
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
-    box-shadow: none;
     transition: none;
   }
   .navbar-expand-lg .offcanvas .offcanvas-header {
@@ -4306,7 +4292,6 @@ textarea.form-control-lg {
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
-    box-shadow: none;
     transition: none;
   }
   .navbar-expand-xl .offcanvas .offcanvas-header {
@@ -4354,7 +4339,6 @@ textarea.form-control-lg {
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
-    box-shadow: none;
     transition: none;
   }
   .navbar-expand-xxl .offcanvas .offcanvas-header {
@@ -4401,7 +4385,6 @@ textarea.form-control-lg {
   background-color: transparent !important;
   border: 0 !important;
   transform: none !important;
-  box-shadow: none;
   transition: none;
 }
 .navbar-expand .offcanvas .offcanvas-header {
@@ -4546,7 +4529,6 @@ textarea.form-control-lg {
   font-size: var(--bs-progress-font-size);
   background-color: var(--bs-progress-bg);
   border-radius: var(--bs-progress-border-radius);
-  box-shadow: var(--bs-progress-box-shadow);
 }
 
 .progress-bar {
@@ -4672,7 +4654,6 @@ textarea.form-control-lg {
   background-clip: padding-box;
   border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
   border-radius: var(--bs-modal-border-radius);
-  box-shadow: var(--bs-modal-box-shadow);
   outline: 0;
 }
 
@@ -10743,7 +10724,7 @@ textarea.form-control-lg {
   }
 }
 .btn.w-100:has(+ .btn) {
-  margin-bottom: 3px;
+  margin-bottom: 1px;
 }
 
 .btn {
@@ -10788,6 +10769,7 @@ textarea.form-control-lg {
   padding-bottom: 0.3375rem;
   --bs-btn-icon-bg: transparent;
   --bs-btn-icon-color: inherit;
+  --bs-btn-icon-hover-bg: transparent;
 }
 
 .btn-iconed > .btn-icon {
@@ -10812,8 +10794,9 @@ textarea.form-control-lg {
     transition: none;
   }
 }
-.btn-iconed > .btn-icon {
-  box-shadow: var(--bs-btn-box-shadow);
+.btn-iconed:hover > .btn-icon {
+  color: var(--bs-btn-icon-hover-color);
+  background-color: var(--bs-btn-icon-hover-bg);
 }
 
 .btn-iconed > .btn-icon:before {
@@ -10856,39 +10839,42 @@ textarea.form-control-lg {
   --bs-btn-disabled-bg: #E0E0E0;
   --bs-btn-disabled-border-color: #E0E0E0;
   --bs-btn-icon-color: #212529;
-  --activetes: rgb(230.2, 230.2, 230.2);
+  --bs-btn-icon-hover-color: #000;
   --bs-btn-icon-bg: #CACACA;
+  --bs-btn-icon-hover-bg: #CACACA;
+  --activetes: rgb(230.2, 230.2, 230.2);
 }
 
 .btn-iconed-default-white {
-  --bs-btn-color: #ABABAB;
+  --bs-btn-color: #fff;
   --bs-btn-bg: #CACACA;
   --bs-btn-border-color: #CACACA;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: rgb(209.95, 209.95, 209.95);
-  --bs-btn-hover-border-color: rgb(207.3, 207.3, 207.3);
-  --bs-btn-focus-shadow-rgb: 197, 197, 197;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: rgb(171.7, 171.7, 171.7);
+  --bs-btn-hover-border-color: rgb(171.7, 171.7, 171.7);
+  --bs-btn-focus-shadow-rgb: 210, 210, 210;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: rgb(212.6, 212.6, 212.6);
-  --bs-btn-active-border-color: rgb(207.3, 207.3, 207.3);
+  --bs-btn-active-bg: rgb(161.6, 161.6, 161.6);
+  --bs-btn-active-border-color: rgb(151.5, 151.5, 151.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #CACACA;
   --bs-btn-disabled-border-color: #CACACA;
-  --bs-btn-icon-color: #ABABAB;
-  --activetes: rgb(212.6, 212.6, 212.6);
-  --bs-btn-icon-bg: rgb(209.95, 209.95, 209.95);
-  --bs-btn-color: #fff;
+  --bs-btn-icon-color: #fff;
+  --bs-btn-icon-hover-color: #fff;
+  --bs-btn-icon-bg: rgb(171.7, 171.7, 171.7);
+  --bs-btn-icon-hover-bg: rgb(171.7, 171.7, 171.7);
+  --activetes: rgb(161.6, 161.6, 161.6);
 }
 
 .btn-iconed-anthrazit-08-primary {
-  --bs-btn-color: #000;
+  --bs-btn-color: #5C005C;
   --bs-btn-bg: #F7F7F7;
   --bs-btn-border-color: #F7F7F7;
-  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: rgb(248.2, 248.2, 248.2);
-  --bs-btn-hover-border-color: rgb(247.8, 247.8, 247.8);
-  --bs-btn-focus-shadow-rgb: 210, 210, 210;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #990099;
+  --bs-btn-hover-border-color: #990099;
+  --bs-btn-focus-shadow-rgb: 224, 210, 224;
   --bs-btn-active-color: #000;
   --bs-btn-active-bg: rgb(248.6, 248.6, 248.6);
   --bs-btn-active-border-color: rgb(247.8, 247.8, 247.8);
@@ -10896,12 +10882,33 @@ textarea.form-control-lg {
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #F7F7F7;
   --bs-btn-disabled-border-color: #F7F7F7;
-  --bs-btn-icon-color: #000;
+  --bs-btn-icon-color: #990099;
+  --bs-btn-icon-hover-color: #fff;
+  --bs-btn-icon-bg: #EFEFEF;
+  --bs-btn-icon-hover-bg: #5C005C;
   --activetes: rgb(248.6, 248.6, 248.6);
-  --bs-btn-icon-bg: rgb(248.2, 248.2, 248.2);
+}
+
+.btn-iconed-simple {
   --bs-btn-color: #fff;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #5C005C;
+  --bs-btn-bg: #E0E0E0;
+  --bs-btn-border-color: #E0E0E0;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: rgb(190.4, 190.4, 190.4);
+  --bs-btn-hover-border-color: rgb(179.2, 179.2, 179.2);
+  --bs-btn-focus-shadow-rgb: 229, 229, 229;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: rgb(179.2, 179.2, 179.2);
+  --bs-btn-active-border-color: #a8a8a8;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #E0E0E0;
+  --bs-btn-disabled-border-color: #E0E0E0;
+  --bs-btn-icon-color: #fff;
+  --bs-btn-icon-hover-color: #000;
+  --activetes: rgb(179.2, 179.2, 179.2);
+  --bs-btn-hover-color: white;
+  --bs-btn-icon-hover-color: white;
 }
 
 .btn-iconed-primary {
@@ -10920,8 +10927,10 @@ textarea.form-control-lg {
   --bs-btn-disabled-bg: #990099;
   --bs-btn-disabled-border-color: #990099;
   --bs-btn-icon-color: #fff;
-  --activetes: rgb(122.4, 0, 122.4);
+  --bs-btn-icon-hover-color: #fff;
   --bs-btn-icon-bg: rgb(130.05, 0, 130.05);
+  --bs-btn-icon-hover-bg: rgb(130.05, 0, 130.05);
+  --activetes: rgb(122.4, 0, 122.4);
 }
 
 html {

src-ui/scss/_custom.scss

@@ -12,7 +12,7 @@ $font: '../fonts/';
 
 $enable-caret:              true !default;
 $enable-rounded:            true !default;
-$enable-shadows:            true !default;
+$enable-shadows:            false !default;
 $enable-gradients:          false !default;
 $enable-transitions:        true !default;
 $enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS

src-ui/scss/custom/_buttons.scss

@@ -4,7 +4,7 @@
 // CUSTOM Button Sizes
 
 .btn.w-100:has(+.btn) {
-  margin-bottom: 3px;
+  margin-bottom: 1px;
 }
 
 .btn {
@@ -55,28 +55,37 @@
 	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);
+
+.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);
+    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;
 }
@@ -103,45 +112,33 @@
 
 //iconed Buttons
 .btn-iconed-default {
-	@include iconed-button-variant($antrazit15, $antrazit15, $body-color, $antrazit25, $antrazit25);
+	@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($antrazit25, $antrazit25, $antrazit40);
-  --#{$prefix}btn-color: #{$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($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);
-//}
+	@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($btn-primary-bg, $btn-primary-bg /*, $btn-primary-bg*/);
+     @include iconed-button-variant(false, $btn-primary-bg, $btn-primary-bg /*, $btn-primary-bg*/);
 }

src-ui/scss/custom/mixins/_buttons.scss

@@ -29,20 +29,23 @@
 //}
 
 @mixin iconed-button-variant(
+  $simple: false,
   $background,
   $border,
   $color: color-contrast($background),
+  $icon-color: $color,
+  $icon-bg:  shade-color($background, $btn-hover-bg-shade-amount),
   $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
   $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
   $hover-color: color-contrast($hover-background),
+  $icon-hover-bg:  $hover-background,
   $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
   $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
   $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,
   $disabled-color: color-contrast($disabled-background),
-  $simple: false,
-  $icon-color: $color
+
 ) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
@@ -59,12 +62,14 @@
   --#{$prefix}btn-disabled-bg: #{$disabled-background};
   --#{$prefix}btn-disabled-border-color: #{$disabled-border};
   --#{$prefix}btn-icon-color: #{$icon-color};
+  --#{$prefix}btn-icon-hover-color: #{$hover-color};
+  @if ($simple == false) {
+    --#{$prefix}btn-icon-bg: #{$icon-bg};
+    --#{$prefix}btn-icon-hover-bg: #{$icon-hover-bg};
+  }
 
   --activetes: #{$active-background};
 
-  @if ($simple == false) {
-    --#{$prefix}btn-icon-bg: #{$hover-background};
-  }
 
 }
 

step2.php

@@ -11,7 +11,7 @@
 			Leider keine Informationen zu Ihren Produkten gefunden.
 		</div>
 		<h2 class="h3">Services</h2>
-		<a href="simplePage.php" class="btn w-100 btn-hero btn-iconed btn-iconed-anthrazit-08-primary btn-iconed-left">
+		<a href="simplePage.php" class="btn w-100 btn-hero btn-iconed btn-iconed-default btn-iconed-left">
 			Beratung erhalten
 			<i aria-hidden="true" class="btn-icon ifc ifc-chain"></i>
 			<i aria-hidden="true" class="ms-auto ifc ifc-arrow-right"></i>