// variables
// Popover max width 280px
$gl-popover-max-width: $grid-size * 35;

.gl-popover {
  max-width: $gl-popover-max-width;
  @apply gl-bg-overlap;
  @apply gl-border-none;
  @apply gl-drop-shadow-md;
  @apply gl-text-sm;
  @apply gl-rounded-feedback;

  .popover-body {
    @apply gl-text-default;
  }

  &.bs-popover-top {
    /* When popover position is top, the arrow is translated 1 pixel
    *  due to the box-shadow include in our custom styles.
    */
    > .arrow::before {
      bottom: 1px;
      border-top-color: var(--gl-background-color-overlap);
    }

    > .arrow::after {
      bottom: 2px;
      border-top-color: var(--gl-background-color-overlap);
    }
  }

  &.bs-popover-bottom {
    > .arrow::before {
      top: 1px;
      border-bottom-color: var(--gl-background-color-overlap);
    }

    > .arrow::after {
      top: 2px;
      border-bottom-color: var(--gl-background-color-overlap);
    }

    > .popover-header::before {
      border-color: var(--gl-background-color-overlap);
    }
  }

  &.bs-popover-right {
    > .arrow::before {
      left: 1px;
      border-right-color: var(--gl-background-color-overlap);
    }

    > .arrow::after {
      left: 2px;
      border-right-color: var(--gl-background-color-overlap);
    }
  }

  &.bs-popover-left {
    > .arrow::before {
      right: 1px;
      border-left-color: var(--gl-background-color-overlap);
    }

    > .arrow::after {
      right: 2px;
      border-left-color: var(--gl-background-color-overlap);
    }
  }

  .popover-header {
    @apply gl-heading-scale-200;
    @apply gl-border-b-0;
    @apply gl-pb-0;
  }

  &.has-title .popover-header {
    @apply gl-hyphens-auto gl-break-anywhere;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  &.has-close-button:not(.has-title) .popover-header {
    padding-top: $gl-spacing-scale-2;
  }

  .popover-body {
    @apply gl-py-3;
    @apply gl-px-4;

    > .popover-hr {
      @apply gl-my-5;
      @apply gl-mx-0;
    }
  }
}