.bubble-base-bubble {
  position: fixed;
  z-index: 10;
  box-sizing: border-box;
  background: $c-bg-block;
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);

  .bubble-arrows {
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background: $c-bg-block;
    border: 1px solid var(--el-border-color-light);
    transform: rotate(45deg);

    &.top {
      border-top-color: transparent;
      border-left-color: transparent;
    }

    &.bottom {
      border-right-color: transparent;
      border-bottom-color: transparent;
    }

    &.left {
      border-bottom-color: transparent;
      border-left-color: transparent;
    }

    &.right {
      border-top-color: transparent;
      border-right-color: transparent;
    }
  }

  .bubble-view {
    position: absolute;
    z-index: 2;
  }
}

.bubble-dialog {
  position: fixed;
  z-index: 10;
  margin: auto;
  background: $c-bg-block;
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}

.my-zoom-in-left-enter-active,
.my-zoom-in-left-leave-active {
  opacity: 1;
  transition: var(--el-transition-md-fade);
  transform: scaleX(1);
  transform-origin: center right;
}

.my-zoom-in-left-enter-from,
.my-zoom-in-left-leave-active {
  opacity: 0;
  transform: scaleX(0);
}

.my-zoom-in-right-enter-active,
.my-zoom-in-right-leave-active {
  opacity: 1;
  transition: var(--el-transition-md-fade);
  transform: scaleX(1);
  transform-origin: center left;
}

.my-zoom-in-right-enter-from,
.my-zoom-in-right-leave-active {
  opacity: 0;
  transform: scaleX(0);
}

:deep(.el-dialog.bubble-dialog) .el-dialog__header {
  display: none;
}
