$_popover-arrow-border-size: 1px;
$_popover-arrow-border-color: $grayLighter;

$_popover-arrow-size: 7px;
$_popover-arrow-back-size: $_popover-arrow-size + $_popover-arrow-border-size;

$_popover-arrow-offset-left: $_popover-arrow-size*2;
$_popover-arrow-back-offset-left: $_popover-arrow-offset-left - ($_popover-arrow-back-size - $_popover-arrow-size);

@mixin popover-reset(){
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;
  word-wrap: break-word;
  text-transform: none;
  pointer-events: none;
  margin: 0;
  @include text-align-left($rtl);
}

.popover {
  position: absolute;
  visibility: hidden;
  left: 0;
  bottom: 100%;
  z-index: 1000;
  border-radius: $borderRadiusS;

  width: 230px;

	background: $white;
	border: 1px solid $grayLighter;

	opacity: 0;

	-webkit-transition: opacity .3s, margin .3s;
	        transition: opacity .3s, margin .3s;

  @include popover-reset();

	&:before {
    content: '';
    position: absolute;
    left: $_popover-arrow-back-offset-left;
    bottom: -$_popover-arrow-back-size;
    width: 0;
    height: 0;
    border-color: $_popover-arrow-border-color transparent transparent;
    border-style: solid;
    border-width: $_popover-arrow-back-size $_popover-arrow-back-size 0;
  }

	&:after {
	  content: '';
	  position: absolute;
    left: $_popover-arrow-offset-left;
    bottom: -$_popover-arrow-size;
	  width: 0;
	  height: 0;
		border-color: #f6f7f8 transparent transparent;
		border-style: solid;
		border-width: $_popover-arrow-size $_popover-arrow-size 0;
	}

	.popover-header {
    color: $grayDark !important;
	  display: block;
	  padding: $spacingS $spacingS $spacingXs;
	  border-bottom: 1px dotted $grayLighter;
	}

	.popover-content {
    color: $grayDark !important;
    display: block;
    padding: $spacingS;
  }

	.popover-footer {
    color: $grayDark !important;
    display: block;
    padding: $spacingS;
    background: #f6f7f8;
    border-top: 1px solid lighten($grayLighter, 10%);
    border-radius: 0 0 $borderRadiusS $borderRadiusS;
  }
}

/* On bottom */



.popover-bottom .popover {
  top: 100%;
  bottom: auto;
  margin: 0;

  &:before {
    top: -$_popover-arrow-back-size;
    border-color: transparent transparent $_popover-arrow-border-color;
    border-style: solid;
    border-width: 0 $_popover-arrow-back-size $_popover-arrow-back-size;
    left: $_popover-arrow-back-offset-left;
  }

  &:after {
    top: -$_popover-arrow-size;
    border-color: transparent transparent $white;
    border-style: solid;
    border-width: 0 $_popover-arrow-size $_popover-arrow-size;
  }
}

.popover-display {
  position: relative;

  &:hover,
  &:focus {
    .popover {
      visibility: visible;
      margin-bottom: 10px;
      opacity: 1;
    }
  }
}

.popover-display.popover-bottom {
  &:hover,
  &:focus {
    .popover {
      margin-top: 10px;
    }
  }
}


/* On left */

.popover-left .popover {
  right: 0;
  left: auto;

  &:before {
    right: $_popover-arrow-back-offset-left;
    left: auto;
  }

  &:after {
    right: $_popover-arrow-offset-left;
    left: auto;
  }
}

/* Popover sizes */

.popover-s { width: 230px; }
.popover-m { width: 300px; }
.popover-l { width: 400px; }
.popover-xl { width: 530px; }