2 files changed, 29 insertions, 101 deletions

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index d44b266b..bc078533 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -45,6 +45,9 @@ const Popover = {
     // Lets hover popover stay when clicking inside of it
     stayOnClick: Boolean,
 
+    // Use styled button (to avoid nested buttons)
+    normalButton: Boolean,
+
     triggerAttrs: {
       type: Object,
       default: {}
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index fd0fd821..0c5b372e 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -5,7 +5,8 @@
   >
     <button
       ref="trigger"
-      class="button-unstyled popover-trigger-button"
+      class="popover-trigger-button"
+      :class="normalButton ? 'button-default btn' : 'button-unstyled'"
       type="button"
       v-bind="triggerAttrs"
       @click="onClick"
@@ -41,8 +42,6 @@
 <script src="./popover.js" />
 
 <style lang="scss">
-@import "../../variables";
-
 .popover-trigger-button {
   display: inline-block;
 }
@@ -52,81 +51,54 @@
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
-  box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
-  box-shadow: var(--popupShadow);
+  box-shadow: var(--shadow);
 }
 
 .popover-default {
   &::after {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 3;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    top: -1px;
+    bottom: -1px;
+    left: -1px;
+    right: -1px;
+    z-index: -1px;
+    box-shadow: var(--shadow);
     pointer-events: none;
   }
 
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--text;
-  color: var(--popoverText, $fallback--text);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --postLink: var(--popoverPostLink, $fallback--link);
-  --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-  --icon: var(--popoverIcon, $fallback--icon);
+  border-radius: var(--roundness);
+  border-color: var(--border);
+  border-style: solid;
+  border-width: 1px;
+  background-color: var(--background);
 }
 
 .dropdown-menu {
   display: block;
-  padding: 0.5rem 0;
+  padding: 0;
   font-size: 1em;
   text-align: left;
   list-style: none;
   max-width: 100vw;
   z-index: var(--ZI_popover_override, var(--ZI_popovers));
   white-space: nowrap;
+  background-color: var(--background);
 
   .dropdown-divider {
     height: 0;
     margin: 0.5rem 0;
     overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
   }
 
   .dropdown-item {
-    line-height: 21px;
-    overflow: hidden;
-    display: block;
-    padding: 0.5em 0.75em;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: nowrap;
     border: none;
-    border-radius: 0;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-
-    --btnText: var(--popoverText, $fallback--text);
 
     &-icon {
       svg {
-        width: 22px;
-        margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon);
+        width: var(--__line-height);
+        margin-right: var(--__horizontal-gap);
       }
     }
 
@@ -137,40 +109,18 @@
       }
     }
 
-    &:active,
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      box-shadow: none;
-
-      --btnText: var(--selectedMenuPopoverText, $fallback--link);
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-      svg {
-        color: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
-      min-width: 22px;
-      max-width: 22px;
-      min-height: 22px;
-      max-height: 22px;
-      line-height: 22px;
+      min-width: calc(var(--__line-height) + 1px);
+      max-width: calc(var(--__line-height) + 1px);
+      min-height: calc(var(--__line-height) + 1px);
+      max-height: calc(var(--__line-height) + 1px);
+      line-height: var(--__line-height);
       text-align: center;
       border-radius: 0;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
-      margin-right: 0.75em;
+      box-shadow: var(--shadow);
+      margin-right: var(--__horizontal-gap);
 
       &.menu-checkbox-checked::after {
         font-size: 1.25em;
@@ -187,30 +137,5 @@
       }
     }
   }
-
-  .button-default.dropdown-item {
-    &,
-    i[class*="icon-"] {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
 }
 </style>