.guide {
  position: relative;

  &:not(.floating-mode) {
    &.top {
      transform: translateY(-100%);
    }
  
    .bubble {
      --arrow-width: 14px;
      --arrow-height: 10px;
      --padding: 10px;
      --bottom-left: 20px;
  
      .bubble-layer {
        min-height: auto;
        min-width: auto;
        padding-right: 30px;
  
        .guide-close {
          position: absolute;
          right: 10px;
          top: 10px;
          // margin-top: 2px;
          font-size: 12px;
        }
      }
    }
  
    .guide-bubble {
      .default-msg {
        white-space: nowrap;
      }
    }
  }
}

.guide-floating {
  color: #fff;
  font-size: 14px;

  &.top {
    transform: translateY(-100%);
  }

  .bubble {
    --arrow-width: 14px;
    --arrow-height: 10px;
    --padding: 10px;
    --bottom-left: 20px;
    position: static;

    .bubble-layer {
      min-height: auto;
      min-width: auto;
      padding-right: 30px;

      .guide-close {
        position: absolute;
        right: 10px;
        top: 10px;
        // margin-top: 2px;
        font-size: 12px;
      }
    }
  }

  .guide-bubble {
    .default-msg {
      white-space: nowrap;
    }
  }
}