fix: details component - less specific styles (#9868)

Author: deleonio

packages/components/src/components/details/style.scss

@@ -3,25 +3,12 @@
 @use '../host-display-block' as *;
 @use '../@shared/collapsible.mixin' as *;
 @use '../@shared/icon.mixin' as *;
+@use '../@shared/button.mixin' as *;
 
 @layer kol-component {
+	@include kol-button-styles('kol-button');
 	@include kol-icon-styles();
 	.kol-details {
-		&__heading-button {
-			display: flex;
-
-			.kol-button {
-				min-height: auto;
-
-				.kol-span {
-					&__label {
-						border-bottom-color: grey;
-						border-bottom-style: solid;
-					}
-				}
-			}
-		}
-
 		.collapsible--open &__heading-button {
 			.kol-icon {
 				transform: rotate(90deg);

packages/themes/default/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png

@@ -34,7 +34,7 @@
 				}
 
 				&__label {
-					border-bottom-color: #000;
+					border-bottom: 3px solid black;
 				}
 			}
 

packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-details-firefox-linux.png

@@ -20,10 +20,6 @@
 		.kol-icon {
 			font-size: to-rem(24);
 		}
-
-		.kol-span__label {
-			border-bottom: 0;
-		}
 	}
 
 	.kol-details {