@import "~bootstrap/scss/popover";

.x-popover-card {
  @extend .p-0,
          .position-relative,
          .border-0,
          .d-block;
  @include size(26em, auto);
  max-width: 26em !important;
  @include box-shadow(none);
}

// Popper Js Content
.ngxp__container {
  @extend .p-0,
          .border;

  margin-left: -(map_get($spacers, 2)) !important;
  box-shadow: $popover-box-shadow !important;
  z-index: $zindex-popover;

  &[x-placement^="right"] > .ngxp__arrow {
    @extend .bg-white,
            .border-0;
    @include size(map_get($spacers, 3));
    @include box-shadow(inset 1px -1px 0 0 $border-color);

    transform: rotate(45deg);
    left: -(map_get($spacers,2)) !important;
  }
}


.x-popover-no-arrow {
  @extend .border-0,
          .rounded-0;
  @include box-shadow(none);

  .popover-arrow {
    @extend .d-none;
  }
  .popover-body {
    @extend .px-4,
            .bg-secondary,
            .text-uppercase,
            .text-white;
  }

  &.popover-left {
    @extend .font-weight-bold,
            .mr-0;
  }
}