/* Popover */

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

.Popover-message {
  position: relative;
  width: 232px;
  margin-right: auto;
  margin-left: auto;
  background-color: var(--overlay-bgColor);
  border: var(--borderWidth-thin) solid var(--borderColor-default);
  border-radius: var(--borderRadius-medium);

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

  &::before {
    top: -16px;
    margin-left: -9px;
    border: 8px solid transparent;
    border-bottom-color: var(--borderColor-default);
  }

  &::after {
    top: -14px;
    margin-left: -8px;
    border: 7px solid transparent;
    border-bottom-color: var(--overlay-bgColor);
  }
}

/* No caret */
.Popover-message--no-caret {
  &::before,
  &::after {
    display: none;
  }
}

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

  &::before {
    bottom: -16px;
    border-top-color: var(--borderColor-default);
  }

  &::after {
    bottom: -14px;
    border-top-color: var(--overlay-bgColor);
  }
}

/* Top and 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 and Bottom: Left-oriented carets */
.Popover-message--top-left,
.Popover-message--bottom-left {
  left: -9px;
  margin-left: 0;

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

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

/* Right- and 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: -16px;
    border-left-color: var(--borderColor-default);
  }

  &::after {
    right: -14px;
    border-left-color: var(--overlay-bgColor);
  }
}

/* Left-oriented carets */
.Popover-message--left,
.Popover-message--left-top,
.Popover-message--left-bottom {
  &::before {
    left: -16px;
    border-right-color: var(--borderColor-default);
  }

  &::after {
    left: -14px;
    border-right-color: var(--overlay-bgColor);
  }
}

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

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

  &::before {
    bottom: 16px;
  }

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

@media (min-width: 544px) {
  .Popover-message--large {
    min-width: 320px;
  }
}

/* Responsive Popover
** For < md it will show full-width anchored to the bottom */

@media (max-width: 767.98px) {
  .Popover {
    position: fixed;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .Popover-message {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto !important;
    margin: var(--stack-gap-condensed);
  }

  /* Increase tap area for touch input */
  .Popover-message > .btn-octicon {
    padding: var(--control-medium-paddingInline-normal) !important;
  }

  /* Remove caret */
  .Popover-message::after,
  .Popover-message::before {
    display: none;
  }
}