From 1eb7b97930bfdcad7a65067adc0f42ace36fa0e3 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Wed, 26 Jul 2023 20:29:49 +0300
Subject: [PATCH] feat: added arrow bg color for Popover component

---
 src/Popover/_mixins.scss | 27 +++++++++++++++++++++++++++
 src/Popover/index.scss   | 31 ++++---------------------------
 2 files changed, 31 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 00000000000..0a911e979c0
--- /dev/null
+++ b/src/Popover/_mixins.scss
@@ -0,0 +1,27 @@
+@mixin get-popover-variant($bg, $icon-color) {
+  background: $bg;
+
+  .popover-header {
+    background: $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 5da744d7403..88b1d2da18e 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);
 }