.ui-popover-wrapper {
  position: relative;
  display:  inline-block;
}
.ui-popover {
  background-color: #FFF7DD;
  border-radius:    4px;
  position:         absolute;
  z-index:          999;
  min-width:        250px;

  // top:     default
  transform:  translate(-50%, -100%);
  margin-top: -20px;
  top:        0;
  left:       50%;

  transition:         all .3s ease;
  animation-name:     ui-popover-animation-top;
  animation-duration: .3s;

  &:after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       20px;
    right:      20px;
    height:     20px;
    background: linear-gradient(0deg, rgba(#FFF7DD,1), rgba(#FFF7DD,0));
  }

  .ui-popover--white & {
    background-color: #FFF;
    filter:           drop-shadow(0 0 1px rgba(0,0,0,.2));

    &:after {
      background: linear-gradient(0deg, rgba(#FFF,1), rgba(#FFF,0));
    }
    &:before {
      background-color: #FFF;
    }
  }

  &:before {
    content:          '';
    position:         absolute;
    width:            16px;
    height:           16px;
    background-color: #FFF7DD;
    transform:        translate(-50%, -50%) rotate(45deg);
    // top: default
    left: 50%;
    top:  100%;
  }
  &--left:before {
    left:  100%;
    top:   50%;
  }
  &--right:before {
    left: auto;
    top:  50%;
  }
  &--bottom:before {
    left: 50%;
    top:  0;
  }

  &--left {
    animation-name: ui-popover-animation-left;
    transform:      translate(0, -50%);
    margin-top:     0;
    margin-right:   20px;
    top:            50%;
    right:          100%;
    left:           auto;
  }
  &--bottom {
    animation-name: ui-popover-animation-bottom;
    transform:  translate(-50%, 0);
    margin-top: 20px;
    top:        100%;
    left:       50%;
  }
  &--right {
    animation-name: ui-popover-animation-right;
    transform:   translate(0, -50%);
    margin-top:  0;
    margin-left: 20px;
    top:         50%;
    left:        100%;
  }
}
.ui-popover-scroll {
  max-height: 200px;
  overflow:   auto;
  position: relative;
  .ui-popover--custom & {
    max-height: inherit;
    overflow:   visible;
  }
}
.ui-popover-content {
  padding:     20px;
  font-size:   .95em;
  line-height: 1.6em;
  position: relative;

  .ui-popover--custom & {
    padding: 0;
  }
}
.ui-popover-title {
  padding:       10px 20px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  margin-bottom: -10px;
}


@keyframes ui-popover-animation-top {
  from {opacity: 0; margin-top: 0;}
  to   {opacity: 1; margin-top: -20px;}
}
@keyframes ui-popover-animation-bottom {
  from {opacity: 0; margin-top: 0;}
  to   {opacity: 1; margin-top: 20px;}
}
@keyframes ui-popover-animation-left {
  from {opacity: 0; margin-right: 0;}
  to   {opacity: 1; margin-right: 20px;}
}
@keyframes ui-popover-animation-right {
  from {opacity: 0; margin-left: 0;}
  to   {opacity: 1; margin-left: 20px;}
}