@import 'variable.scss';

/* ==========================================================================
 *
 * File Name:         Tooltip
 * Description:       Simple, visual toolstip for your webpage
 * Editing Details:   Change font, color, background properties as needed
 * Use:               Add the 'tooltip' class and its affiliates to the section or div
                      you want to display as the tooltip
 * Affiliates:        Works with the align list of classes to set text direction
                      of the hero text
 * Source:            For more information of code source please visit:
                      https://www.w3schools.com/css/css_tooltip.asp
 ============================================================================ */
//General tooltip
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 2px dotted $beet;
  }

//Default tooltip
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: hsl(334, 76%, 20%, 0.5);
    font-family: $terciary-font;
    color: $mute;
    text-align: center;
    border-radius: 7px;
    padding: 3px 0;

/* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

//Toolstip position
.tooltiptext-right {
    top: -5px;
    left: 105%;  
}

.tooltiptext-left {
    top: -5px;
    right: 105%;
}

.tooltiptext-top {
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltiptext-bottom {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

//Tooltip style:
.tooltip-fadein {
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

//Toolstip Arrow:

%general-tooltip-arrow {
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: hsl(334, 76%, 20%, 0.5);
        font-family: $terciary-font;
        color: $mute;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 110%;
        }
        .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%; /* To the left of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent hsl(334, 76%, 20%, 0.5) transparent transparent;
        }
        .tooltip:hover .tooltiptext {
        visibility: visible;
        }
}
.tooltip .tooltip-arrow-right {
    @extend %general-tooltip-arrow;
}

.tooltip .tooltip-arrow-left {
    @extend %general-tooltip-arrow;
    .tooltip .tooltiptext::after {
        left: 100%; /* To the right of the tooltip */
    }
}

.tooltip .tooltip-arrow-top {
    @extend %general-tooltip-arrow;
    .tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: hsl(334, 76%, 20%, 0.5) transparent transparent transparent;
    }
}

.tooltip .tooltip-arrow-bottom {
    @extend %general-tooltip-arrow;
    .tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        bottom: 100%;  /* At the top of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent hsl(334, 76%, 20%, 0.5) transparent;
    }
}