.popover {
  display: inline-block;
  position: absolute;
  background-color: white;
  padding: 2px;
  @include 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%);    
    @include 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;
      @include box-sizing(border-box);
    
      a {
        display: block;
        @include 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;
      }
    }
  }
}