<template>
  <span class="ccb-hint">
    <i class="ccb-icon-Path-3367"></i>
    <span class="ccb-hint__content">
      <slot name="content"></slot>
    </span>
  </span>
</template>

<script setup lang="ts"></script>

<style lang="scss">
.ccb-hint {
  position: relative;
  width: auto;
  display: inline-flex;
  margin-left: 7px;
  margin-top: 2px;
  color: var(--ccb-toggle-label-bg);
  font-size: 12px;

  &:hover {
    .ccb-hint__content {
      visibility: visible;
    }
  }

  &__content {
    width: -webkit-max-content;
    width: max-content;
    color: #fff;
    visibility: hidden;
    background-color: #3b3e4a;
    text-align: center;
    position: absolute;
    padding: 5px 15px;
    margin: 0 0 5px 0;
    transform: translateX(-50%);
    left: 50%;
    bottom: 102%;
    z-index: 1221;
    border-radius: 5px;
    transition: opacity 0.3s;
    line-height: normal;
    font-size: 13px;
    max-width: 300px;
    word-wrap: break-word;

    &:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #3b3e4a transparent transparent transparent;
    }

    @media (max-width: 550px) {
      max-width: 100px;
    }
  }
}
</style>
