@import '../core/theme.scss';

/* TOOLTIPS */
.tooltip {
    position: relative; /* let's the pseudoelement that we are displaying relative to the button. */
    overflow: visible; /* Allows the pseudoelement to be shown */
    white-space: nowrap; /* Keeps the button text from wrapping and getting too large */

    /* This is the psuedoelement that creates the tooltip */
    &::after {
        -webkit-appearance: none;
        -moz-appearance: none;
        position: absolute;
        color: #fff;
        font-size: 0.6rem;
        background-color: $tooltip-primary-bg;
        content: attr(data-tooltip); /* Retrieves the data specified in this element property and displays it as text */
        display: block;
        line-height: 1rem;
        text-transform: none;
        overflow: hidden;
        padding: 0.4rem 0.8rem;
        opacity: 0; /* Hide the element */
        text-overflow: ellipsis;
        max-width: 15rem;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        transition: all var(--animation-duration) ease;
        z-index: 200;
        pointer-events: none;
        bottom: 100%; /* Pushes the tooltip above the button */
        left: 50%; /* Horizontally center it */
        border-radius: 0.2rem;
    }

    /* Handles the on hover event of the button and then modifies the associated tooltip accordingly. */
    &:focus::after,
    &:hover::after {
        opacity: 1;
        -webkit-transform: translate(-50%, -0.5rem);
        transform: translate(-50%, -0.5rem);
        transition: all var(--animation-duration) ease;
    }

    /* Tooltip top left */
    &.tooltip--top-left::after {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    &.tooltip--top-left:hover::after,
    &.tooltip--top-left:focus::after {
        left: 0;
        -webkit-transform: translate(-100%, -0.5rem);
        transform: translate(-100%, -0.5rem);
    }

    /* Tooltip top right */
    &.tooltip--top-right::after {
        left: auto;
        -webkit-transform: translate(15%, 0);
        transform: translate(15%, 0);
    }

    &.tooltip--top-right:hover::after,
    &.tooltip--top-right:focus::after {
        right: 0;
        -webkit-transform: translate(100%, -0.5rem);
        transform: translate(100%, -0.5rem);
    }

    /* Tooltip bottom */
    &.tooltip--bottom::after {
        top: 100%;
        transform: translate(-50%, -1rem); /* Moves tooltip to the center horizontally and shifts tooltip down */
        -webkit-transform: translate(-50%, -1rem);
        -moz-transform: translate(-50%, -1rem);
        -ms-transform: translate(-50%, -1rem);
        bottom: auto;
    }

    &.tooltip--bottom:hover::after,
    &.tooltip--bottom:focus::after {
        transform: translate(-50%, 0.5rem);
        -webkit-transform: translate(-50%, 0.5rem);
        -moz-transform: translate(-50%, 0.5rem);
        -ms-transform: translate(-50%, 0.5rem);
        bottom: auto;
    }

    /* Tooltip bottom left */
    &.tooltip--bottom-left::after {
        top: 100%;
        -webkit-transform: translate(-65%, -1rem);
        transform: translate(-65%, -1rem);
        bottom: auto;
    }

    &.tooltip--bottom-left:hover::after,
    &.tooltip--bottom-left:focus::after {
        left: 0;
        -webkit-transform: translate(-100%, 0.5rem);
        transform: translate(-100%, 0.5rem);
    }

    /* Tooltip bottom right */
    &.tooltip--bottom-right::after {
        left: auto;
        top: 100%;
        -webkit-transform: translate(0%, -1rem);
        transform: translate(0%, -1rem);
        bottom: auto;
    }

    &.tooltip--bottom-right:hover::after,
    &.tooltip--bottom-right:focus::after {
        right: 0;
        -webkit-transform: translate(100%, 0.5rem);
        transform: translate(100%, 0.5rem);
    }

    /* Tooltip right */
    &.tooltip--right::after {
        left: 100%;
        bottom: 50%;
        transform: translate(-1rem, 50%);
        -webkit-transform: translate(-1rem, 50%);
        -moz-transform: translate(-1rem, 50%);
        -ms-transform: translate(-1rem, 50%);
    }

    &.tooltip--right:hover::after,
    &.tooltip--right:focus::after {
        transform: translate(0.5rem, 50%);
        -webkit-transform: translate(0.5rem, 50%);
        -moz-transform: translate(0.5rem, 50%);
        -ms-transform: translate(0.5rem, 50%);
    }

    /* Tooltip Left */
    &.tooltip--left::after {
        right: 100%;
        bottom: 50%;
        left: auto; /* Needed to work */
        transform: translate(1rem, 50%);
        -webkit-transform: translate(1rem, 50%);
        -moz-transform: translate(1rem, 50%);
        -ms-transform: translate(1rem, 50%);
    }

    &.tooltip--left:hover::after,
    &.tooltip--left:focus::after {
        transform: translate(-0.5rem, 50%);
        -webkit-transform: translate(-0.5rem, 50%);
        -moz-transform: translate(-0.5rem, 50%);
        -ms-transform: translate(-0.5rem, 50%);
    }
}