/**
 * Regolare i valori di calc() per distanze diverse
 * Aggiungere white-space: normal per tooltip multi-riga
 * Modificare border-width per frecce più grandi/più piccole
 * 
 * Nota importante: 
 * Il sistema sfrutta l'attributo data-tooltip per il contenuto testuale,
 * mantenendo HTML semantico e accessibile. 
 * Per contenuti dinamici, basta modificare l'attributo via JavaScript.
 * Esmpio:
 * <span class="menu-h-box tt-right" data-tt="Open">
 *   <span class="menu-h-inner"></span>
 * </span>
 *
 * @format
 */

/* ========= VARIABILI LESS ========= */
@tt-bg: #cc3a05; // Colore di sfondo del tooltip
@tt-text: #ffffff; // Colore testo del tooltip
@tt-font: 20px "Arial", sans-serif; // Stile font
@tt-radius: 4px; // Border-radius
@tt-shadow: 0 3px 6px #e2ca0e29; // Ombra
@tt-transition: 0.3s opacity; // Transizione
@border-width: 6px;

/* ========= BASE TOOLTIP ========= */
.tt-top,
.tt-bottom,
.tt-left,
.tt-leftx,
.tt-right {
  position: relative;
  // cursor: help;
  transition: 0.2s transform;

  // Pseudo-elementi comuni
  &::before,
  &::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: @tt-transition;
  }

  // Testo del tooltip
  &::before {
    content: attr(data-tt);
    background: @tt-bg;
    color: @tt-text;
    font: @tt-font;
    font-weight: normal;
    // padding: 8px 16px;
    padding: 4px 10px;
    border-radius: @tt-radius;
    box-shadow: @tt-shadow;
    // border: 2px solid yellow;
    white-space: nowrap;
  }

  // Freccia
  // &::after {
  //   content: "";
  //   border: @border-width solid transparent;
  // }

  // Hover states
  &:hover {
    &::before,
    &::after {
      opacity: 1;
    }
  }
}

/* ========= POSIZIONAMENTI ========= */
.tt-top {
  &::before {
    bottom: ~"calc(100% + 12px)"; // Posizionato sopra l'elemento di 12px
    left: 50%; // Centrato orizzontalmente
    transform: translateX(-50%); // Spostato indietro del 50% della sua larghezza
  }

  // &::after {
  //   border-top-color: @tt-bg; // Colore del bordo superiore per la freccia
  //   bottom: ~"calc(100% + 0px)"; // Posizionato sopra l'elemento
  //   left: 50%; // Centrato orizzontalmente
  //   transform: translateX(-50%); // Spostato indietro del 50% della sua larghezza
  // }
}

.tt-bottom {
  &::before {
    top: ~"calc(100% + 12px)"; // Posizionato sotto l'elemento di 12px
    left: 50%; // Centrato orizzontalmente
    transform: translateX(-50%); // Spostato indietro del 50% della sua larghezza
  }

  // &::after {
  //   border-bottom-color: @tt-bg; // Colore del bordo inferiore per la freccia
  //   top: ~"calc(100% + 0px)"; // Posizionato sotto l'elemento
  //   left: 50%; // Centrato orizzontalmente
  //   transform: translateX(-50%); // Spostato indietro del 50% della sua larghezza
  // }
}

.tt-left {
  &::before {
    right: ~"calc(50% + 0px)";
    top: ~"calc(100% + 22px)";
    transform: translateY(-50%);
  }

  // &::after {
  //   border-left-color: @tt-bg;
  //   right: ~"calc(100% + 0px)";
  //   top: 50%;
  //   transform: translateY(-50%);
  // }
}

.tt-leftx {
  &::before {
    right: ~"calc(50% + 20px)";
    top: ~"calc(100% + 22px)";
    transform: translateY(-80%);
  }
}

// .tt-left {
//   &::before {
//     right: ~"calc(100% + 12px)"; // Posizionato a sinistra dell'elemento di 12px
//     top: 50%; // Centrato verticalmente
//     transform: translateY(-50%); // Spostato in alto del 50% della sua altezza
//   }

//   &::after {
//     border-left-color: @tt-bg; // Colore del bordo sinistro per la freccia
//     right: ~"calc(100% + 0px)"; // Posizionato a sinistra dell'elemento
//     top: 50%; // Centrato verticalmente
//     transform: translateY(-50%); // Spostato in alto del 50% della sua altezza
//   }
// }

.tt-right {
  &::before {
    left: ~"calc(100% + 12px)"; // Posizionato a destra dell'elemento di 12px
    top: 50%; // Centrato verticalmente
    transform: translateY(50%); // Spostato in alto del 50% della sua altezza
  }
  // &::after {
  //   border-right-color: @tt-bg; // Colore del bordo destro per la freccia
  //   left: ~"calc(100% + 0px)"; // Posizionato a destra dell'elemento
  //   top: 50%; // Centrato verticalmente
  //   transform: translateY(-50%); // Spostato in alto del 50% della sua altezza
  // }
}

// .tt-right {
//   &::before {
//     left: ~"calc(100% + 12px)"; // Posizionato a destra dell'elemento di 12px
//     top: 50%; // Centrato verticalmente
//     transform: translateY(-50%); // Spostato in alto del 50% della sua altezza
//   }

//   &::after {
//     border-right-color: @tt-bg; // Colore del bordo destro per la freccia
//     left: ~"calc(100% + 0px)"; // Posizionato a destra dell'elemento
//     top: 50%; // Centrato verticalmente
//     transform: translateY(-50%); // Spostato in alto del 50% della sua altezza
//   }
// }