.popover {
  display: inline-block;
  position: absolute;
  background-color: white;
  padding: 2px;
  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px, lighten($primary-color, 15%) 0px 1px 0px 0px inset;
  background-color: $primary-color;

  @include gradient(lighten($primary-color, 4%), darken($primary-color, 5%));

  border: solid 1px darken($primary-color, 10%);
  border-top-color: darken($primary-color, 4%);
  border-bottom-color: darken($primary-color, 17%);
  border-radius: 4px;

  .popover_nipple {
    // The nipple's border
    content: "";
    position: absolute;
    top: -6px;
    display: block;
    width: 0;
    height: 0;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: darken($primary-color, 4%) transparent;
    z-index: 100;

    // The nipple's inner shadow

    &:before {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      border-width: 0 5px 5px;
      border-style: solid;
      border-color: lighten($primary-color, 15%) transparent;
      left: -5px;
      top: 1px;
    }

    // The nipple's background color

    &:after {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      border-width: 0 5px 5px;
      border-style: solid;
      border-color: lighten($primary-color, 4%) transparent;
      left: -5px;
      top: 2px;
    }
  }

  .popover_contents {
    display: block;
    background-color: #FFF;
    border: solid 1px darken($primary-color, 10%);
    box-shadow: lighten($primary-color, 5%) 0px 1px 0px 0px;
    border-radius: 3px;
    margin: 0;
    overflow: hidden;
    padding: 8px;
  }
}

//-------------------------------------- Popover with action list

.popover {
  ul.popover_contents {
    list-style-type: none;
    padding: 0;

    li {
      display: block;
      border-bottom: solid 1px #ebebeb;
      box-sizing: border-box;

      a {
        display: block;
        box-sizing: padding-box;
        font-size: 0.95em;
        font-weight: bold;
        padding: 7px 16px 5px;
        text-decoration: none;
        text-align: center;
        -webkit-font-smoothing: antialiased;

        &:hover {
          @include highlight-gradient;

          @include text-shadow(#5a83aa);

          color: #FFF;
        }

        &:active {
          @include reverse-highlight-gradient;

          color: #FFF;
        }
      }

      &:first-child {
        a {
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
        }
      }

      &:last-child {
        a {
          border-bottom-left-radius: 2px;
          border-bottom-right-radius: 2px;
        }

        border: none;
      }
    }
  }
}