/* =========================================================
   SIMPTIP - CSS TOOLTIP
   ========================================================= */

/* Base */
[class*="simptip"] {
    position: relative;
    display: inline-block;
    cursor: help;
}

/* ---------------------------------------------------------
   Tooltip
   --------------------------------------------------------- */

[class*="simptip"]::before,
[class*="simptip"]::after {
    position: absolute;
    z-index: 99999;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    box-sizing: border-box;
}

/* Texte du tooltip */
[class*="simptip"]::after {
    content: attr(data-tooltip);

    width: max-content;
    max-width: 350px;

    padding: 8px 12px;

    background: #222;
    color: #fff;

    border-radius: 5px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;

    text-align: center;
    white-space: normal;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

/* Petite flèche */
[class*="simptip"]::before {
    content: "";

    width: 0;
    height: 0;

    border-style: solid;

    z-index: 100000;
}

/* ---------------------------------------------------------
   Affichage au survol
   --------------------------------------------------------- */

[class*="simptip"]:hover::before,
[class*="simptip"]:hover::after,
[class*="simptip"]:focus::before,
[class*="simptip"]:focus::after {
    visibility: visible;
    opacity: 1;
}

/* =========================================================
   POSITION TOP
   ========================================================= */

.simptip-position-top::after {
    left: 50%;
    bottom: calc(100% + 10px);

    transform: translateX(-50%) translateY(5px);
}

.simptip-position-top::before {
    left: 50%;
    bottom: calc(100% + 4px);

    transform: translateX(-50%);

    border-width: 6px 6px 0 6px;
    border-color: #222 transparent transparent transparent;
}

.simptip-position-top:hover::after,
.simptip-position-top:focus::after {
    transform: translateX(-50%) translateY(0);
}

/* =========================================================
   POSITION BOTTOM
   ========================================================= */

.simptip-position-bottom::after {
    left: 50%;
    top: calc(100% + 10px);

    transform: translateX(-50%) translateY(-5px);
}

.simptip-position-bottom::before {
    left: 50%;
    top: calc(100% + 4px);

    transform: translateX(-50%);

    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #222 transparent;
}

.simptip-position-bottom:hover::after,
.simptip-position-bottom:focus::after {
    transform: translateX(-50%) translateY(0);
}

/* =========================================================
   POSITION LEFT
   ========================================================= */

.simptip-position-left::after {
    right: calc(100% + 10px);
    top: 50%;

    transform: translateY(-50%) translateX(5px);
}

.simptip-position-left::before {
    right: calc(100% + 4px);
    top: 50%;

    transform: translateY(-50%);

    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #222;
}

.simptip-position-left:hover::after,
.simptip-position-left:focus::after {
    transform: translateY(-50%) translateX(0);
}

/* =========================================================
   POSITION RIGHT
   ========================================================= */

.simptip-position-right::after {
    left: calc(100% + 10px);
    top: 50%;

    transform: translateY(-50%) translateX(-5px);
}

.simptip-position-right::before {
    left: calc(100% + 4px);
    top: 50%;

    transform: translateY(-50%);

    border-width: 6px 6px 6px 0;
    border-color: transparent #222 transparent transparent;
}

.simptip-position-right:hover::after,
.simptip-position-right:focus::after {
    transform: translateY(-50%) translateX(0);
}

/* =========================================================
   MOVABLE
   ========================================================= */

.simptip-movable::after {
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

/* =========================================================
   SMOOTH
   ========================================================= */

.simptip-smooth::before,
.simptip-smooth::after {
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

/* =========================================================
   COULEURS
   ========================================================= */

/* Bleu */
.simptip-blue::after {
    background: #1976d2;
}

.simptip-blue.simptip-position-top::before {
    border-top-color: #1976d2;
}

.simptip-blue.simptip-position-bottom::before {
    border-bottom-color: #1976d2;
}

.simptip-blue.simptip-position-left::before {
    border-left-color: #1976d2;
}

.simptip-blue.simptip-position-right::before {
    border-right-color: #1976d2;
}

/* Vert */
.simptip-green::after {
    background: #2e7d32;
}

.simptip-green.simptip-position-top::before {
    border-top-color: #2e7d32;
}

.simptip-green.simptip-position-bottom::before {
    border-bottom-color: #2e7d32;
}

.simptip-green.simptip-position-left::before {
    border-left-color: #2e7d32;
}

.simptip-green.simptip-position-right::before {
    border-right-color: #2e7d32;
}

/* Rouge */
.simptip-red::after {
    background: #d32f2f;
}

.simptip-red.simptip-position-top::before {
    border-top-color: #d32f2f;
}

.simptip-red.simptip-position-bottom::before {
    border-bottom-color: #d32f2f;
}

.simptip-red.simptip-position-left::before {
    border-left-color: #d32f2f;
}

.simptip-red.simptip-position-right::before {
    border-right-color: #d32f2f;
}

/* =========================================================
   RTL / ARABE
   ========================================================= */

html[dir="rtl"] [class*="simptip"]::after {
    direction: rtl;
    text-align: right;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    [class*="simptip"]::after {
        max-width: 260px;
        font-size: 12px;
        padding: 7px 10px;
    }

}