popover fixed

Author: BF150

packages/components/src/components/@shared/_popover-button.mixin.scss

@@ -1,15 +1,5 @@
 @use 'mixins' as *;
 
-@keyframes kol-popover-fade-in {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
 @mixin kol-popover-button-styles {
 	.kol-popover-button {
 		&__popover {
@@ -24,8 +14,11 @@
 	}
 
 	.kol-popover {
-		&--visible {
-			animation: 0.3s ease-in forwards kol-popover-fade-in;
-		}
+		opacity: 0;
+		transition: 0.2s ease-out opacity;
+	}
+
+	.kol-popover-button--open + .kol-popover {
+		opacity: 1;
 	}
 }

packages/components/src/components/popover-button/style.scss

@@ -15,6 +15,8 @@
 		}
 
 		&--inline {
+			display: inline-block;
+
 			.kol-button {
 				min-width: 0;
 				min-height: 1em;

packages/components/src/components/split-button/style.scss

@@ -1,11 +1,13 @@
 @use '../@shared/mixins' as *;
 @use '../@shared/global' as *;
-@use '../popover/style.scss' as *;
 @use '../tooltip/style.scss' as *;
 @use '../@shared/icon.mixin' as *;
+@use '../@shared/popover-button.mixin' as *;
 
 @layer kol-component {
 	@include kol-icon-styles();
+	@include kol-popover-button-styles;
+
 	.kol-split-button {
 		display: flex;
 		position: relative;
@@ -21,17 +23,5 @@
 			flex: 1 1 auto;
 			text-align: left;
 		}
-
-		.kol-popover {
-			z-index: 1;
-
-			&__content {
-				margin-top: to-rem(2);
-			}
-
-			&__arrow {
-				display: none;
-			}
-		}
 	}
 }