.cl-tip {
  &__showZindex {
    z-index: 1000;
  }
  &__content {
    position: absolute;
    z-index: 10;
    &.bottom {
      &::after {
        content: '';
        background-color: white;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        left: 50%;
        border-radius: 6px;
        transform: translateX(-50%) rotate(45deg) translateY(-50%);
      }
    }
    &.show {
      transition: all 0.2s ease;
    }
    &.hide {
      width: 0;
      transition: all 0.2s ease;
    }
  }
  &__arrow {
    z-index: -1;
    position: absolute;
    transform: translateX(-50%) rotate(45deg) translateY(-50%);
    &.showArrow {
      transition: all 0.2s ease;
      height: 20px;
      width: 20px;
    }
    &.hideArrow {
      transition: all 0.2s ease;
      height: 0;
      width: 0;
    }
  }
  &__message {
    overflow: hidden;
    border-radius: 6px;
  }
}