From fe8f1ae60955380c2d20c9963e40d8111112b201 Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Tue, 1 Aug 2023 12:17:48 +0300
Subject: [PATCH] fix: added arrow bg color for Popover component (#2477)

---
 src/Popover/_mixins.scss | 31 +++++++++++++++++++++++++++++++
 src/Popover/index.scss   | 31 ++++---------------------------
 2 files changed, 35 insertions(+), 27 deletions(-)
 create mode 100644 src/Popover/_mixins.scss

diff --git a/src/Popover/_mixins.scss b/src/Popover/_mixins.scss
new file mode 100644
index 0000000000..18315a5c1b
--- /dev/null
+++ b/src/Popover/_mixins.scss
@@ -0,0 +1,31 @@
+@mixin get-popover-variant($bg, $icon-color) {
+  background: $bg;
+
+  .popover-header {
+    background: $bg;
+
+    &::before {
+      border-bottom-color: $bg;
+    }
+  }
+
+  .pgn__icon {
+    color: $icon-color;
+  }
+
+  &.bs-popover-bottom .arrow::after {
+    border-bottom-color: $bg;
+  }
+
+  &.bs-popover-top .arrow::after {
+    border-top-color: $bg;
+  }
+
+  &.bs-popover-right .arrow::after {
+    border-right-color: $bg;
+  }
+
+  &.bs-popover-left .arrow::after {
+    border-left-color: $bg;
+  }
+}
diff --git a/src/Popover/index.scss b/src/Popover/index.scss
index 5da744d740..88b1d2da18 100644
--- a/src/Popover/index.scss
+++ b/src/Popover/index.scss
@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 @import "~bootstrap/scss/popover";
 
 .popover {
@@ -18,37 +19,13 @@
 }
 
 .popover-success {
-  background: $popover-success-bg;
-
-  .popover-header {
-    background: $popover-success-bg;
-  }
-
-  .pgn__icon {
-    color: $popover-success-icon-color;
-  }
+  @include get-popover-variant($popover-success-bg, $popover-success-icon-color);
 }
 
 .popover-warning {
-  background: $popover-warning-bg;
-
-  .popover-header {
-    background: $popover-warning-bg;
-  }
-
-  .pgn__icon {
-    color: $popover-warning-icon-color;
-  }
+  @include get-popover-variant($popover-warning-bg, $popover-warning-icon-color);
 }
 
 .popover-danger {
-  background: $popover-danger-bg;
-
-  .popover-header {
-    background: $popover-danger-bg;
-  }
-
-  .pgn__icon {
-    color: $popover-danger-icon-color;
-  }
+  @include get-popover-variant($popover-danger-bg, $popover-danger-icon-color);
 }