/* Popover */

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

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

  /* Carets */
}

.Popover-message::before,
  .Popover-message::after {
    position: absolute;
    left: 50%;
    display: inline-block;
    content: '';
  }

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

.Popover-message::after {
    top: -14px;
    margin-left: -8px;
    border: 7px solid transparent;
    border-bottom-color: var(--color-canvas-overlay);
  }

/* No caret */

.Popover-message--no-caret::before,
  .Popover-message--no-caret::after {
    display: none;
  }

/* Bottom-oriented carets */

.Popover-message--bottom::before,
  .Popover-message--bottom-right::before,
  .Popover-message--bottom-left::before,
  .Popover-message--bottom::after,
  .Popover-message--bottom-right::after,
  .Popover-message--bottom-left::after {
    top: auto;
    border-bottom-color: transparent;
  }

.Popover-message--bottom::before, .Popover-message--bottom-right::before, .Popover-message--bottom-left::before {
    bottom: -16px;
    border-top-color: var(--color-border-default);
  }

.Popover-message--bottom::after, .Popover-message--bottom-right::after, .Popover-message--bottom-left::after {
    bottom: -14px;
    border-top-color: var(--color-canvas-overlay);
  }

/* Top and Bottom: Right-oriented carets */

.Popover-message--top-right,
.Popover-message--bottom-right {
  right: -9px;
  margin-right: 0;
}

.Popover-message--top-right::before,
  .Popover-message--bottom-right::before,
  .Popover-message--top-right::after,
  .Popover-message--bottom-right::after {
    left: auto;
    margin-left: 0;
  }

.Popover-message--top-right::before, .Popover-message--bottom-right::before {
    right: 20px;
  }

.Popover-message--top-right::after, .Popover-message--bottom-right::after {
    right: 21px;
  }

/* Top and Bottom: Left-oriented carets */

.Popover-message--top-left,
.Popover-message--bottom-left {
  left: -9px;
  margin-left: 0;
}

.Popover-message--top-left::before,
  .Popover-message--bottom-left::before,
  .Popover-message--top-left::after,
  .Popover-message--bottom-left::after {
    left: 24px;
    margin-left: 0;
  }

.Popover-message--top-left::after, .Popover-message--bottom-left::after {
    left: 25px;
  }

/* Right- and Left-oriented carets */

.Popover-message--right::before,
  .Popover-message--right-top::before,
  .Popover-message--right-bottom::before,
  .Popover-message--left::before,
  .Popover-message--left-top::before,
  .Popover-message--left-bottom::before,
  .Popover-message--right::after,
  .Popover-message--right-top::after,
  .Popover-message--right-bottom::after,
  .Popover-message--left::after,
  .Popover-message--left-top::after,
  .Popover-message--left-bottom::after {
    top: 50%;
    left: auto;
    margin-left: 0;
    border-bottom-color: transparent;
  }

.Popover-message--right::before, .Popover-message--right-top::before, .Popover-message--right-bottom::before, .Popover-message--left::before, .Popover-message--left-top::before, .Popover-message--left-bottom::before {
    margin-top: -9px;
  }

.Popover-message--right::after, .Popover-message--right-top::after, .Popover-message--right-bottom::after, .Popover-message--left::after, .Popover-message--left-top::after, .Popover-message--left-bottom::after {
    margin-top: -8px;
  }

/* Right-oriented carets */

.Popover-message--right::before, .Popover-message--right-top::before, .Popover-message--right-bottom::before {
    right: -16px;
    border-left-color: var(--color-border-default);
  }

.Popover-message--right::after, .Popover-message--right-top::after, .Popover-message--right-bottom::after {
    right: -14px;
    border-left-color: var(--color-canvas-overlay);
  }

/* Left-oriented carets */

.Popover-message--left::before, .Popover-message--left-top::before, .Popover-message--left-bottom::before {
    left: -16px;
    border-right-color: var(--color-border-default);
  }

.Popover-message--left::after, .Popover-message--left-top::after, .Popover-message--left-bottom::after {
    left: -14px;
    border-right-color: var(--color-canvas-overlay);
  }

/* Right and Left: Top-oriented carets */

.Popover-message--right-top::before,
  .Popover-message--left-top::before,
  .Popover-message--right-top::after,
  .Popover-message--left-top::after {
    top: 24px;
  }

/* Right and Left: Bottom-oriented carets */

.Popover-message--right-bottom::before,
  .Popover-message--left-bottom::before,
  .Popover-message--right-bottom::after,
  .Popover-message--left-bottom::after {
    top: auto;
  }

.Popover-message--right-bottom::before, .Popover-message--left-bottom::before {
    bottom: 16px;
  }

.Popover-message--right-bottom::after, .Popover-message--left-bottom::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 {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }
  .Popover {
    position: fixed;
  }

  .Popover-message {
    width: auto !important;
  }

  .Popover-message {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: var(--yattho-stack-gap-condensed, 8px);
  }

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

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