fuse-code/src/components/bill-ui/assets/scss/components/_bubble.scss

.bubble {
  --arrow-width: 45px;
  --arrow-height: 32px;
  --back-color: rgba(27, 27, 28, 0.8);
  --border-color-fill: 0, 0, 0;
  --border-color: rgb(var(--border-color-fill));
  --radius: 8px;
  --padding: 20px 20px;
  --bottom-left: 40px;
  position: absolute;
  z-index: 9;
  transition: transform .3s ease, opacity .3s ease;



  >.bubble-layer {
    // backdrop-filter: blur(4px);
    position: relative;
    padding: var(--padding);
    min-width: calc(3 * var(--arrow-width));
    min-height: calc(3 * var(--arrow-height));
    background: var(--back-color);
    box-shadow: 0px 0px 10px 0px rgba(var(--border-color-fill), 0.3);
    // border: 1px solid var(--border-color);
    border-radius: var(--radius);

    > .bubble-arr {
      position: absolute;
      display: block;
      pointer-events: none;
      margin-left: 1px;
      z-index: 99;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      border-width: calc(var(--arrow-width) / 2);
    }
  }

  &.left,
  &.right {
    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      width: calc(var(--arrow-width) / 1.4);
      height: calc(var(--arrow-width) / 1.3);
      top: 50%;
      transform: translateY(calc(-50% + 0.5px));
    }

    top: 50%;
    transform: translateY(calc(-50% + 0.5px));


    >.bubble-layer > .bubble-arr {
      top: 50%;
      transform: translateY(calc(-50% + 0.5px));
      border-width: calc(var(--arrow-width) / 3);

    }
    
    
    &.fade-enter-active,
    &.fade-leave-active {
      transform: translateY(calc(-50% + 0.5px)) scale(1);
      opacity: 1;
    }
    &.fade-enter-from,
    &.fade-leave-to {
      transform: translateY(calc(-50% + 0.5px)) scale(0);
      opacity: 0;
    }
  }

  &.left {
    transform-origin: center right;
    margin-right: var(--arrow-width);
    right: 50%;
    
    &::after {
      left: 100%;
    }

    >.bubble-layer > .bubble-arr {
      left: calc(100% - 1px);
      right: calc(-1 * var(--arrow-width) * 1.1);
      border-left-color: var(--back-color);
      border-left-width: calc(var(--arrow-width) / 1.3);
    }
  }

  &.right {
    transform-origin: center left;
    margin-left: var(--arrow-width);
    left: 50%;

    &::after {
      right: 100%;
    }

    >.bubble-layer > .bubble-arr {
      right: 100%;
      left: calc(-1 * var(--arrow-width) * 1.1);
      border-right-color: var(--back-color);
      border-right-width: calc(var(--arrow-width) / 1.3);
    }
  }


  &.bottom,
  &.top {

    &.fade-enter-active,
    &.fade-leave-active {
      transform: scale(1);
      opacity: 1;
    }
    &.fade-enter-from,
    &.fade-leave-to {
      transform: scale(0);
      opacity: 0;
    }
  }

  &.bottom {
    top: 100%;
    left: calc(50% - var(--bottom-left));
    padding-top: var(--arrow-width);
    transform-origin: var(--bottom-left) top;


    >.bubble-layer > .bubble-arr {
      border-width: calc(var(--arrow-width) / 3);
      border-bottom-width: calc(var(--arrow-width) / 1.3);
      border-bottom-color: var(--back-color);


      left: 0;
      top: calc(-1 * var(--arrow-width));
      bottom: 100%;
      transform: translateX(calc(-50% + 0.5px));
      margin-left: var(--bottom-left);
      // clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
  }

  &.top {
    bottom: 100%;
    left: calc(50% - var(--bottom-left));
    padding-bottom: var(--arrow-width);
    transform-origin: var(--bottom-left) bottom;


    >.bubble-layer > .bubble-arr {
      border-width: calc(var(--arrow-width) / 3);
      border-top-width: calc(var(--arrow-width) / 1.3);
      border-top-color: var(--back-color);

      left: 0;
      top: 100%;
      transform: translateX(calc(-50% + 0.5px));
      margin-left: var(--bottom-left);
      // clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
  }
}