$enable-rounded: true;

@mixin popover-direction($popover-arrow-width, $arrow-distance, $bg) {
  &[x-placement^="top"] {
    padding-bottom: $popover-arrow-width;
  }

  &[x-placement^="right"] {
    padding-left: $popover-arrow-width;
  }

  &[x-placement^="bottom"] {
    padding-top: $popover-arrow-width;
  }

  &[x-placement^="left"] {
    padding-right: $popover-arrow-width;
  }

  &[x-placement^="top"] &-arrow {
    bottom: 0;
    border-bottom-width: 0;
    border-top-color: $popover-arrow-outer-color;

    &:after {
      content: " ";
      border-bottom-width: 0;
      border-top-color: $popover-arrow-color;
      bottom: 1px;
      margin-left: -$popover-arrow-width;
    }
  }

  &[x-placement="top"] &-arrow {
    margin-left: -$popover-arrow-outer-width;
    left: 50%;
  }

  &[x-placement="top-start"] &-arrow {
    left: 16px;
  }

  &[x-placement="top-end"] &-arrow {
    right: 16px;
  }

  &[x-placement^="right"] &-arrow {
    left: 0;
    border-left-width: 0;
    border-right-color: $popover-arrow-outer-color;

    &:after {
      left: 1px;
      content: " ";
      border-left-width: 0;
      border-right-color: $popover-arrow-color;
      margin-top: -$popover-arrow-width;
    }
  }

  &[x-placement="right"] &-arrow {
    top: 50%;
    margin-top: -$popover-arrow-outer-width;
  }

  &[x-placement="right-start"] &-arrow {
    top: 8px;
  }

  &[x-placement="right-end"] &-arrow {
    bottom: 8px;
  }

  &[x-placement^="left"] &-arrow {
    right: 0;
    border-right-width: 0;
    border-left-color: $popover-arrow-outer-color;

    &:after {
      right: 1px;
      content: " ";
      border-right-width: 0;
      border-left-color: $popover-arrow-color;
      margin-top: -$popover-arrow-width;
    }
  }

  &[x-placement="left"] &-arrow {
    top: 50%;
    margin-top: -$popover-arrow-outer-width;
  }

  &[x-placement="left-start"] &-arrow {
    top: 8px;
  }

  &[x-placement="left-end"] &-arrow {
    bottom: 8px;
  }

  &[x-placement^="bottom"] &-arrow {
    top: 0;
    border-top-width: 0;
    border-bottom-color: $popover-arrow-outer-color;

    &:after {
      top: 1px;
      content: " ";
      border-top-width: 0;
      border-bottom-color: $popover-arrow-color;
      margin-left: -$popover-arrow-width;
    }
  }

  &[x-placement="bottom"] &-arrow {
    left: 50%;
    margin-left: -$popover-arrow-outer-width;
  }

  &[x-placement="bottom-start"] &-arrow {
    left: 16px;
  }

  &[x-placement="bottom-end"] &-arrow {
    right: 16px;
  }
}

$enable-rounded: true;
$enable-shadows: true;

// Single side border-radius
@mixin border-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-radius: $radius;
  }
}

@mixin border-top-radius($radius) {
  @if $enable-rounded {
    border-top-left-radius: $radius;
    border-top-right-radius: $radius;
  }
}

@mixin border-right-radius($radius) {
  @if $enable-rounded {
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
  }
}

@mixin border-bottom-radius($radius) {
  @if $enable-rounded {
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
  }
}

@mixin border-left-radius($radius) {
  @if $enable-rounded {
    border-top-left-radius: $radius;
    border-bottom-left-radius: $radius;
  }
}

@mixin box-shadow($shadow...) {
  @if $enable-shadows {
    box-shadow: $shadow;
  }
}

.#{$popover-prefix-cls} {
  position: absolute;
  z-index: $zindex-popover;
  display: block;
  min-width: $popover-min-width;
  font-size: $font-size-sm;
  // Allow breaking very long words so they don't overflow the popover's bounds
  word-wrap: break-word;
  visibility: visible;
  @include popover-direction($popover-arrow-width, $popover-arrow-outer-width, $popover-arrow-outer-color);

  &-content {
    padding: $popover-content-padding-y $popover-content-padding-x;
    color: $popover-color;
    background-color: $popover-bg;
    background-clip: padding-box;
    @include border-radius($border-radius);
    @include box-shadow($popover-box-shadow);
    border: 1px solid $popover-border-color;

    p {
      margin-bottom: 0;
    }

    .#{$popover-prefix-cls}-title {
      position: relative;
      padding: 0 $popover-title-padding-x $popover-title-padding-y $popover-title-padding-x;
      margin: 0;
      font-size: $popover-title-font-size;
      @include border-top-radius($border-radius);

      &:empty {
        display: none;
      }

      &-inner {
        font-size: inherit;
        color: inherit;
      }
    }

    .#{$popover-prefix-cls}-inner {
      width: 100%;
      word-wrap: break-word;
      background-color: $white;
      background-clip: padding-box;

      .#{$popover-prefix-cls}-body {
        font-size: $popover-body-font-size;

        &-content {
          overflow: auto;

          &-inner {
            font-size: inherit;
            color: inherit;
          }
        }
      }
    }
  }

  // popover-arrow
  &-arrow {
    border-width: $popover-arrow-outer-width;

    &,
    &::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    &::after {
      content: "";
      border-width: $popover-arrow-width;
    }
  }

  &--confirm {
    max-width: $popover-max-width;

    .#{$popover-prefix-cls}-footer {
      display: flex;

      button {
        flex: 1 1 100%;

        &:not(:last-child) {
          margin-right: 10px;
        }
      }
    }
  }
}