css/modules/primer-popover/lib/popover.scss

.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: $spacer-2 $border-style transparent;
    border-bottom-color: rgba(0, 0, 0, 0.15);
  }

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

// Bottom-oriented carets
.Popover-message--bottom,
.Popover-message--bottom--right,
.Popover-message--bottom--left {
  &::before,
  &::after {
    top: auto;
    border-bottom-color: transparent;
  }

  &::before {
    bottom: -15px;
    border-top-color: rgba(0, 0, 0, 0.15);
  }

  &::after {
    bottom: -13px;
    border-top-color: $bg-white;
  }
}

// Top & Bottom: Right-oriented carets
.Popover-message--top--right,
.Popover-message--bottom--right {
  right: -9px;
  margin-right: 0;

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

  &::before {
    right: 20px;
  }

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

// Top & Bottom: Left-oriented carets
.Popover-message--top--left,
.Popover-message--bottom--left {
  left: -9px;
  margin-left: 0;

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

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

// Right- & Left-oriented carets
.Popover-message--right,
.Popover-message--right--top,
.Popover-message--right--bottom,
.Popover-message--left,
.Popover-message--left--top,
.Popover-message--left--bottom {
  &::before,
  &::after {
    top: 50%;
    left: auto;
    margin-left: 0;
    border-bottom-color: transparent;
  }

  &::before {
    margin-top: -9px;
  }

  &::after {
    margin-top: -8px;
  }
}

// Right-oriented carets
.Popover-message--right,
.Popover-message--right--top,
.Popover-message--right--bottom {
  &::before {
    right: -15px;
    border-left-color: rgba(0, 0, 0, 0.15);
  }

  &::after {
    right: -13px;
    border-left-color: $bg-white;
  }
}

// Left-oriented carets
.Popover-message--left,
.Popover-message--left--top,
.Popover-message--left--bottom {
  &::before {
    left: -15px;
    border-right-color: rgba(0, 0, 0, 0.15);
  }

  &::after {
    left: -13px;
    border-right-color: $bg-white;
  }
}

// Right & Left: Top-oriented carets
.Popover-message--right--top,
.Popover-message--left--top {
  &::before,
  &::after {
    top: 20px;
  }
}

// Right & Left: Bottom-oriented carets
.Popover-message--right--bottom,
.Popover-message--left--bottom {
  &::before,
  &::after {
    top: auto;
  }

  &::before {
    bottom: 20px;
  }

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

.Popover-message--lg {

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