@mixin popover-direction($popover-arrow-width, $arrow-distance, $bg) {

  &[x-placement^="top"] {
    padding-bottom: $popover-arrow-width;
  }
  &[x-placement^="right"] {
    padding-left:$popover-arrow-width;
  }
  &[x-placement^="bottom"] {
    padding-top:$popover-arrow-width;
  }
  &[x-placement^="left"] {
    padding-right:$popover-arrow-width;
  }

  &[x-placement^="top"] &-arrow {
    bottom: 0;
    border-bottom-width: 0;
    border-top-color: $popover-arrow-outer-color;
    &:after {
      content: " ";
      border-bottom-width: 0;
      border-top-color: $popover-arrow-color;
      bottom: 1px;
      margin-left: -$popover-arrow-width;
    }
  }

  &[x-placement="top"] &-arrow {
    margin-left:-$popover-arrow-outer-width;
    left: 50%;
  }

  &[x-placement="top-start"] &-arrow {
    left: 16px;
  }
  &[x-placement="top-end"] &-arrow {
    right: 16px;
  }

  &[x-placement^="right"] &-arrow {
    left:0;
    border-left-width: 0;
    border-right-color: $popover-arrow-outer-color;
    &:after {
      left:1px;
      content: " ";
      border-left-width: 0;
      border-right-color: $popover-arrow-color;
      margin-top: -$popover-arrow-width;
    }
  }

  &[x-placement="right"] &-arrow {
    top: 50%;
    margin-top: -$popover-arrow-outer-width;
  }

  &[x-placement="right-start"] &-arrow {
    top: 8px;
  }
  &[x-placement="right-end"] &-arrow {
    bottom: 8px;
  }

  &[x-placement^="left"] &-arrow {
    right:0;
    border-right-width: 0;
    border-left-color: $popover-arrow-outer-color;
    &:after {
      right:1px;
      content: " ";
      border-right-width: 0;
      border-left-color: $popover-arrow-color;
      margin-top: -$popover-arrow-width;
    }
  }
  &[x-placement="left"] &-arrow {
    top: 50%;
    margin-top: -$popover-arrow-outer-width;
  }
  &[x-placement="left-start"] &-arrow {
    top: 8px;
  }
  &[x-placement="left-end"] &-arrow {
    bottom: 8px;
  }

  &[x-placement^="bottom"] &-arrow {
    top: 0;
    border-top-width: 0;
    border-bottom-color: $popover-arrow-outer-color;
    &:after {
      top:1px;
      content: " ";
      border-top-width: 0;
      border-bottom-color: $popover-arrow-color;
      margin-left: -$popover-arrow-width;
    }
  }
  &[x-placement="bottom"] &-arrow {
    left: 50%;
    margin-left: -$popover-arrow-outer-width;
  }
  &[x-placement="bottom-start"] &-arrow {
    left: 16px;
  }
  &[x-placement="bottom-end"] &-arrow {
    right: 16px;
  }
}