@charset "UTF-8";

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip:hover::before {
  cursor: default;
  content: attr(data-display-text);
  font-weight: bold;
  display: flex;
  justify-content: center;
  position: absolute;
  top: calc(100% - 52px);
  left: calc(50% + 3px);
  color: var(--color);
  border: 1px solid var(--color);
  padding: 10px;
  border-radius: 7px;
  background-color: var(--bg);
  transform: translateX(-50%) translateY(-100%);
  font-size: 15px;
  opacity: 1;
  z-index: 100;
  width: max-content;
  max-width: 250px;
  white-space: normal;
}

.tooltip:hover::after {
  content: "";
  cursor: default;
  position: absolute;
  top: -11px;
  left: 50%;
  background-color: var(--bg);
  border-bottom: 1px solid var(--color);
  border-right: 1px solid var(--color);
  transform: rotate(45deg) translate3d(-50%, 0, 0);
  opacity: 1;
  width: 20px;
  height: 20px;
  z-index: 101;
}