.Popover {

position: absolute;
z-index: 100;

}

.Popover-message {

position: relative;
width: 232px;
margin-right: auto;
margin-left: auto;

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

&::before {
  top: -$spacer-3;
  // stylelint-disable-next-line primer/spacing
  margin-left: -9px;
  // stylelint-disable-next-line primer/borders
  border: $spacer-2 $border-style transparent;
  border-bottom-color: var(--color-border-primary);
}

&::after {
  top: -14px;
  margin-left: -$spacer-2;
  // stylelint-disable-next-line primer/borders
  border: 7px $border-style transparent;
  // stylelint-disable-next-line primer/borders
  border-bottom-color: var(--color-bg-overlay);
}

// TODO: Refactor so that .Popover is not dependant on .Box
&.Box {
  background-color: var(--color-bg-overlay);
}

}

// Bottom-oriented carets .Popover-message–bottom, .Popover-message–bottom-right, .Popover-message–bottom-left {

&::before,
&::after {
  top: auto;
  border-bottom-color: transparent;
}

&::before {
  bottom: -$spacer-3;
  border-top-color: var(--color-border-primary);
}

&::after {
  bottom: -14px;
  // stylelint-disable-next-line primer/borders
  border-top-color: var(--color-bg-overlay);
}

}

// 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: $spacer-4;
  margin-left: 0;
}

&::after {
  left: $spacer-4 + 1;
}

}

// 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 {
  // stylelint-disable-next-line primer/spacing
  margin-top: -($spacer-2 + 1);
}

&::after {
  margin-top: -$spacer-2;
}

}

// Right-oriented carets .Popover-message–right, .Popover-message–right-top, .Popover-message–right-bottom {

&::before {
  right: -$spacer-3;
  border-left-color: var(--color-border-primary);
}

&::after {
  right: -14px;
  // stylelint-disable-next-line primer/borders
  border-left-color: var(--color-bg-overlay);
}

}

// Left-oriented carets .Popover-message–left, .Popover-message–left-top, .Popover-message–left-bottom {

&::before {
  left: -$spacer-3;
  border-right-color: var(--color-border-primary);
}

&::after {
  left: -14px;
  // stylelint-disable-next-line primer/borders
  border-right-color: var(--color-bg-overlay);
}

}

// Right & Left: Top-oriented carets .Popover-message–right-top, .Popover-message–left-top {

&::before,
&::after {
  top: $spacer-4;
}

}

// Right & Left: Bottom-oriented carets .Popover-message–right-bottom, .Popover-message–left-bottom {

&::before,
&::after {
  top: auto;
}

&::before {
  bottom: $spacer-3;
}

&::after {
  bottom: $spacer-3 + 1;
}

}

.Popover-message–large {

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

}