/*!rtl:begin:ignore*/
@keyframes slide-top {
  0% {
    opacity: 0;
    transform: translateY(-5%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(5%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-bottom {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(-5%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.o_popover {
  $border-color: gray("300");
  $bg-color: gray("200");
  $arrow-pad: 0px;
  $arrow-size: 8px;
  $animation-time: 0.2s;
  max-width: 100vw;

  z-index: 1060;
  border: 1px solid $border-color;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

  &.o-popper-position {
    &--tm {
      animation: $animation-time slide-top;
      margin-top: $arrow-size;

      &::before,
      &::after {
        pointer-events: none;
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -$arrow-size;
        border: $arrow-size solid transparent;
        border-top-color: $bg-color;
      }

      &::before {
        margin-top: 1px;
        border-top-color: $border-color;
      }
    }

    &--rm {
      animation: $animation-time slide-right;
      margin-left: -$arrow-size;

      &::before,
      &::after {
        pointer-events: none;
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -$arrow-size;
        border: $arrow-size solid transparent;
        border-right-color: $bg-color;
      }

      &::before {
        margin-right: 1px;
        border-right-color: $border-color;
      }
    }

    &--bm {
      animation: $animation-time slide-bottom;
      margin-top: -$arrow-size;

      &::before,
      &::after {
        pointer-events: none;
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -$arrow-size;
        border: $arrow-size solid transparent;
        border-bottom-color: $bg-color;
      }

      &::before {
        margin-bottom: 1px;
        border-bottom-color: $border-color;
      }
    }

    &--lm {
      animation: $animation-time slide-left;
      margin-left: $arrow-size;

      &::before,
      &::after {
        pointer-events: none;
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-top: -$arrow-size;
        border: $arrow-size solid transparent;
        border-left-color: $bg-color;
      }

      &::before {
        margin-left: 1px;
        border-left-color: $border-color;
      }
    }
  }
}
/*!rtl:end:ignore*/