/**
 * Popover
 */

@popover-triangle-size:          8px;
@popover-triangle-right-offset:  16px;
@popover-triangle-left-offset:   16px;

/**
 * Colors
 */

@gray:          #aab2bd;
@gray-light:    #e6e9ed;
@gray-dark:     #434a54;
@white:         #ffffff;
@black:         #000000;

/**
 * Breakpoint
 */

@breakpoint-mobile: 620px;

.drop-shadow(@box-shadow: 0 6px 12px rgba(0,0,0,.175)) {
  -webkit-box-shadow: @box-shadow;
     -moz-box-shadow: @box-shadow;
          box-shadow: @box-shadow;
}

.popover-wrapper {
  position: relative;
}

/**
 * Popover
 */

.popover-modal {
  .drop-shadow;
  -webkit-transition: all 240ms cubic-bezier(0.34, 1.61, 0.7, 1);
       -o-transition: all 240ms cubic-bezier(0.34, 1.61, 0.7, 1);
          transition: all 240ms cubic-bezier(0.34, 1.61, 0.7, 1);
  -webkit-transform: scale(0);
          transform: scale(0);
  transform-origin: 29px -10px;
  opacity: 0;
  position: absolute;
  z-index: 1000;
  width: 300px;
  margin-top: @popover-triangle-size;
  border-radius: 4px;
  border: 1px solid @gray;
  background-color: @white;
}

.popover-wrapper.open .popover-modal {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.popover-wrapper.open .btn-dropdown { outline: none; }

/**
 * Popover triangle
 */

.popover-modal:before {
  display: inline-block;
  position: absolute;
  top: -2 * @popover-triangle-size;
  left: @popover-triangle-left-offset;
  border: @popover-triangle-size solid rgba(0, 0, 0, 0);
  border-bottom-color: @gray;
  content: "";
}

.popover-modal:after {
  display: inline-block;
  position: absolute;
  top: (-2 * @popover-triangle-size) + 2;
  left: @popover-triangle-left-offset + 1;
  border: @popover-triangle-size - 1 solid rgba(0, 0, 0, 0);
  border-bottom-color: @white;
  content: "";
}

/**
 * Popover Body
 */

.popover-modal .popover-body {
  margin: 0;
  padding: 4px 0;
  max-height: 300px;
  overflow: scroll;
}

.popover-modal .popover-body.popover-body-padded { padding: 8px; }

/**
 * Popover header
 */

.popover-modal .popover-header {
  padding: 8px;
  line-height: 19px;
  border-bottom: 1px solid @gray;
}

.popover-modal .popover-header a {
  color: @gray-dark;
  text-decoration: none;
  line-height: 19px;
}

.popover-modal .popover-header a:hover { color: @black; }

.popover-modal .popover-header .popover-close-btn { float: right; }

/**
 * Popover from right
 */

.popover-wrapper.right {
  .popover-modal {
    transform-origin: 275px -10px;
    right: 0;
  }

  .popover-modal:before {
    left: auto;
    right: @popover-triangle-right-offset;
  }

  .popover-modal:after {
    left: auto;
    right: @popover-triangle-right-offset + 1;
  }
}