.Popover {
  position: absolute;
  z-index: 100;
}

.Popover-message {
  position: relative;
  width: 235px;
  margin-right: auto;
  margin-left: auto;

  // Carets
  &::before,
  &::after {
    position: absolute;
    left: 50%;
    display: inline-block;
    content: "";
  }

  &::before {
    top: -15px;
    margin-left: -9px;
    border: 8px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.15);
  }

  &::after {
    top: -13px;
    margin-left: -8px;
    border: 7px solid transparent;
    border-bottom-color: $bg-white;
  }
}

.Popover-message--right {
  right: -9px;
  margin-right: 0;

  &::before,
  &::after {
    left: auto;
    margin-left: 0;
  }

  &::before {
    right: 20px;
  }

  &::after {
    right: 21px;
  }
}

.Popover-message--left {
  left: -9px;
  margin-left: 0;

  &::before,
  &::after {
    left: 20px;
    margin-left: 0;
  }

  &::after {
    left: 21px;
  }
}

.Popover-message--lg {

  @include breakpoint(sm) {
    min-width: 330px;
  }
}