$popover-triangle-size: 0.6875rem !default;
$popover-triangle-color: #fff;

.ns-popover-list-theme {
  box-sizing: border-box;
  border: solid 1px #d2d2d2;
  border-radius: 3px;
  z-index: 100;
  background-color: #fff;
  -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
     -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
          box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);

  ul, .list {
    padding: 0;
    margin: 0.625rem 0;
    display: block;
  }

  li, .list-item {
    list-style-type: none;

    a {
      padding: 0.1875rem 0.625rem;
      display: block;

      &:hover {
        background-color: #f5f5f5;
      }
    }
  }
}

// @mixins
//
// We use this to create equilateral triangles
// $triangle-size - Used to set border-size. No default, set a px or em size.
// $triangle-color - Used to set border-color which makes up triangle. No default
// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
@mixin triangle($triangle-direction, $triangle-size:$popover-triangle-size, $triangle-color:$popover-triangle-color) {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid $triangle-size;
  border-color: transparent;
  position: absolute;

  &:after {
    content: " ";
    display: block;
    width:0;
    height:0;
    border: solid ($triangle-size - 0.0625rem);
    border-color: transparent;
    position: absolute;
  }

  @if ($triangle-direction == top) {
    border-top-color: rgba(0,0,0,0.25);
    left:50%;
    bottom: -$triangle-size;
    margin-left: -$triangle-size;

    &:after {
      border-top-color: $triangle-color;
      border-bottom-width: 0;
      bottom: 0.0625rem;
      margin-left: -($triangle-size - 0.0625rem);
    }
  }

  @if ($triangle-direction == bottom) {
    border-bottom-color: rgba(0,0,0,0.25);
    left:50%;
    top: -$triangle-size;
    margin-left: -$triangle-size;

    &:after {
      border-bottom-color: $triangle-color;
      border-top-width: 0;
      top: 0.0625rem;
      margin-left: -($triangle-size - 0.0625rem);
    }
  }

  @if ($triangle-direction == left) {
    border-left-color: rgba(0,0,0,0.25);
    top:50%;
    right: -$triangle-size;
    margin-top: -$triangle-size;

    &:after {
      border-left-color: $triangle-color;
      border-right-width: 0;
      right: 0.0625rem;
      bottom: -($triangle-size - 0.0625rem);
    }
  }

  @if ($triangle-direction == right) {
    border-right-color: rgba(0,0,0,0.25);
    top:50%;
    left: -$triangle-size;
    margin-top: -$triangle-size;

    &:after {
      border-right-color: $triangle-color;
      border-left-width: 0;
      left: 0.0625rem;
      bottom: -($triangle-size - 0.0625rem);
    }
  }
}

.ns-popover-tooltip-theme {
  box-sizing: border-box;
  z-index: 100;
  background-color: transparent;

  .ns-popover-tooltip {
    box-sizing: border-box;
    border: solid 1px #d2d2d2;
    border-radius: 3px;
    z-index: 100;
    background-color: #fff;
    padding: 0.5625rem 0.875rem;
    max-width: 20rem;
    font-size: 0.875rem;
    -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
       -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
            box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
    margin: $popover-triangle-size - 0.0625rem;
  }

  &.ns-popover-bottom-placement {
    .triangle {
      @include triangle("bottom");
    }
  }

  &.ns-popover-top-placement {
    .triangle {
      @include triangle("top");
    }
  }

  &.ns-popover-right-placement {
    .triangle {
      @include triangle("right");
    }
  }

  &.ns-popover-left-placement {
    .triangle {
      @include triangle("left");
    }
  }
}