/**
 * Tooltip Styles
 * Designed by Chris Bracco
 * https://codepen.io/cbracco/pen/kNMqmJ
 *
 * Use as `data-tooltip` HTML data attribute or `.tooltip-box` CSS class
 *
**/

/* Base styles for the element that has a tooltip */
[data-tooltip], .tooltip-box {
    position: relative;
    cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]::before, [data-tooltip]::after, .tooltip-box::before, .tooltip-box::after {
    /* filter: progid:dximagetransform.microsoft.alpha(Opacity=0); */
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    -webkit-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, -webkit-transform .2s cubic-bezier(.71, 1.7, .77, 1.24);
    -moz-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, -moz-transform .2s cubic-bezier(.71, 1.7, .77, 1.24);
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out, transform .2s cubic-bezier(.71, 1.7, .77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover::before, [data-tooltip]:hover::after, [data-tooltip]:focus::before, [data-tooltip]:focus::after, .tooltip-box:hover::before, .tooltip-box:hover::after, .tooltip-box:focus::before, .tooltip-box:focus::after {
    /* filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); */
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip-box::before, [data-tooltip]::before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

/* Base styles for the tooltip's content area */
.tooltip-box::after, [data-tooltip]::after {
    /* background-color: hsla(0, 0%, 20%, 0.9); */
    z-index: 1000;
    padding: 8px;
    width: 160px;
    background-color: #000000;
    color: #FFFFFF;
    content: attr(data-tooltip);
    font-size: 14px;
    line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]::before, [data-tooltip]::after, .tooltip-box::before, .tooltip-box::after, .tooltip-box-top::before, .tooltip-box-top::after {
    bottom: 100%;
    left: 50%;
}

[data-tooltip]::before, .tooltip-box::before, .tooltip-box-top::before {
    /* border-top-color: hsla(0, 0%, 20%, 0.9); */
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: #000;
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]::after, .tooltip-box::after, .tooltip-box-top::after {
    margin-left: -80px;
}

[data-tooltip]:hover::before, [data-tooltip]:hover::after, [data-tooltip]:focus::before, [data-tooltip]:focus::after, .tooltip-box:hover::before, .tooltip-box:hover::after, .tooltip-box:focus::before, .tooltip-box:focus::after, .tooltip-box-top:hover::before, .tooltip-box-top:hover::after, .tooltip-box-top:focus::before, .tooltip-box-top:focus::after {
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    transform: translateY(-12px);
}

/* Left */
.tooltip-box-left::before, .tooltip-box-left::after {
    right: 100%;
    bottom: 50%;
    left: auto;
}

.tooltip-box-left::before {
    /* border-left-color: hsla(0, 0%, 20%, 0.9); */
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: #000000;
}

.tooltip-box-left:hover::before, .tooltip-box-left:hover::after, .tooltip-box-left:focus::before, .tooltip-box-left:focus::after {
    -webkit-transform: translateX(-12px);
    -moz-transform: translateX(-12px);
    transform: translateX(-12px);
}

/* Bottom */
.tooltip-box-bottom::before, .tooltip-box-bottom::after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-box-bottom::before {
    /* border-bottom-color: hsla(0, 0%, 20%, 0.9); */
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #000000;
}

.tooltip-box-bottom:hover::before, .tooltip-box-bottom:hover::after, .tooltip-box-bottom:focus::before, .tooltip-box-bottom:focus::after {
    -webkit-transform: translateY(12px);
    -moz-transform: translateY(12px);
    transform: translateY(12px);
}

/* Right */
.tooltip-box-right::before, .tooltip-box-right::after {
    bottom: 50%;
    left: 100%;
}

.tooltip-box-right::before {
    /* border-right-color: hsla(0, 0%, 20%, 0.9); */
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: #000000;
}

.tooltip-box-right:hover::before, .tooltip-box-right:hover::after, .tooltip-box-right:focus::before, .tooltip-box-right:focus::after {
    -webkit-transform: translateX(12px);
    -moz-transform: translateX(12px);
    transform: translateX(12px);
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-box-left::before, .tooltip-box-right::before {
    top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-box-left::after, .tooltip-box-right::after {
    margin-left: 0;
    margin-bottom: -16px;
}