/**
    Configurable variables - feel free to change as needed
 */
.tooltip {
    --tooltip-spacing-base: 2px;
    --tooltip-multiline-width: 20em;
    --tooltip-font-size: 14px;
    --tooltip-font-family: Arial, 'Helvetica', sans;
    --tooltip-background-color: #303030;
    --tooltip-border-color: #40a6ff;
    --tooltip-border-width: var(--tooltip-spacing-base);
    --tooltip-border-style: solid;
    --tooltip-border-radius: calc(var(--tooltip-spacing-base) * 4);
    --tooltip-shadow-color: rgba(0, 0, 0, 0.8);
    --tooltip-shadow-x: 0px;
    --tooltip-shadow-y: 0px;
    --tooltip-shadow-blur: 5px;
    --tooltip-shadow-spread: 0px;
    --tooltip-color: #DCDCDC;
    --tooltip-triangle-size: 8px;
    --tooltip-padding-vertical: calc(var(--tooltip-spacing-base) * 6);
    --tooltip-padding-horizontal: calc(var(--tooltip-spacing-base) * 12);
}

/**
    Calculated variables - don`t touch until you understand what they do
 */
.tooltip {
    --tooltip-triangle-size-negative: calc(var(--tooltip-triangle-size) * -1);
    --tooltip-arrow-size: calc(var(--tooltip-triangle-size) / 2);
    --tooltip-arrow-size-negative: calc(var(--tooltip-triangle-size-negative) / 2);
    --tooltip-line-height: calc(var(--tooltip-font-size) * 1.3);
    --tooltip-height: calc(var(--tooltip-line-height) + var(--tooltip-padding-vertical) * 2);

    --tooltip-arrow-clip-negative: calc(var(--tooltip-shadow-blur) * -1);
    --tooltip-arrow-clip: calc(100% + var(--tooltip-shadow-blur))
}

/**
    example - this is how you add theme overrides
 */
.tooltip.olive,
.olive .tooltip {
    --tooltip-spacing-base: 2px;
    --tooltip-background-color: olive;
    --tooltip-shadow-blur: 6px;
    --tooltip-border-radius: calc(var(--tooltip-spacing-base) * 2);
    --tooltip-triangle-size: 8px;
    --tooltip-color: #FCFCFC;
}

/**
    mini - small version of the tooltip (all the spacings are half size)
 */
.tooltip.mini {
    --tooltip-font-size: 0.6em;
    --tooltip-spacing-base: 1px;
    --tooltip-shadow-blur: 2px;
    --tooltip-triangle-size: 8px;
}

/**
    round - will always have round borders (half sphere)
 */
.tooltip.round {
    --tooltip-border-radius: calc(var(--tooltip-height) / 2);
}

.tooltip[alt] {
    position: relative;
    display: inline-block;
    color: red;
    font-weight: bold;
}

.tooltip[alt]:before,
.tooltip[alt]:after {
    position: absolute;
    opacity: 0;
    background: var(--tooltip-background-color);
    box-shadow: var(--tooltip-shadow-x) var(--tooltip-shadow-y) var(--tooltip-shadow-blur) var(--tooltip-shadow-color);
    transition: all 0.2s ease-in-out;
    transform-origin: center;
    pointer-events: none;
}

.tooltip[alt]:after {
    content: attr(alt);
    white-space: nowrap;
    font-size: var(--tooltip-font-size);
    font-weight: 100;
    font-family: var(--tooltip-font-family);
    padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
    border-radius: var(--tooltip-border-radius);
    color: var(--tooltip-color);
    transition-delay: 0.2s;
    z-index: 1;
    box-sizing: border-box;
    -webkit-font-smoothing: subpixel-antialiased;
    will-change: opacity;
}

.tooltip[alt]:before {
    transition-delay: 0s;
    width: var(--tooltip-triangle-size);
    height: var(--tooltip-triangle-size);
    z-index: 2;
}

.tooltip[alt]:hover:before {
    transition-delay: 0.3s;
}

/**
    fixed width - allows multiline and wrapping content
 */
.tooltip.fixed[alt]:after {
    width: var(--tooltip-multiline-width);
    white-space: pre-wrap;
}

.tooltip[alt]:hover:before,
.tooltip[alt]:hover:after {
    opacity: 1;
}

.tooltip[alt].north:after {
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, var(--tooltip-triangle-size));
}

.tooltip[alt].north:hover:after {
    opacity: 1;
    transform: translate(-50%, var(--tooltip-triangle-size-negative));
}

.tooltip.north[alt]:before {
    content: '';
    bottom: 100%;
    left: 50%;
    clip-path: polygon(var(--tooltip-arrow-clip-negative) var(--tooltip-arrow-clip-negative), var(--tooltip-arrow-clip) var(--tooltip-arrow-clip), var(--tooltip-arrow-clip-negative) var(--tooltip-arrow-clip), var(--tooltip-arrow-clip-negative) var(--tooltip-arrow-clip-negative));
    transform: translate(-50%, var(--tooltip-triangle-size-negative)) rotate(-45deg);
}

.tooltip.north[alt]:hover:before {
    transform: translate(-50%, var(--tooltip-arrow-size-negative)) rotate(-45deg);
}

.tooltip.east[alt]:after {
    top: 50%;
    left: 100%;
    transform: translate(var(--tooltip-triangle-size-negative), -50%);
}

.tooltip.east[alt]:hover:after {
    transform: translate(var(--tooltip-triangle-size), -50%);
}

.tooltip.east[alt]:before {
    content: '';
    top: 50%;
    left: 100%;
    clip-path: polygon(var(--tooltip-arrow-clip-negative) var(--tooltip-arrow-clip-negative), var(--tooltip-arrow-clip) var(--tooltip-arrow-clip-negative), var(--tooltip-arrow-clip-negative) var(--tooltip-arrow-clip), 0 var(--tooltip-arrow-clip-negative));
    transform: translate(var(--tooltip-triangle-size), -50%) rotate(-45deg);
}

.tooltip.east[alt]:hover:before {
    transform: translate(var(--tooltip-arrow-size), -50%) rotate(-45deg);
}

.tooltip.south[alt]:after {
    top: 100%;
    left: 50%;
    transform: translate(-50%, var(--tooltip-triangle-size-negative));
}

.tooltip.south[alt]:hover:after {
    transform: translate(-50%, var(--tooltip-triangle-size));
}

.tooltip.south[alt]:before {
    content: '';
    top: 100%;
    left: 50%;
    clip-path: polygon(var(--tooltip-arrow-clip-negative) var(--tooltip-arrow-clip-negative), var(--tooltip-arrow-clip) var(--tooltip-arrow-clip-negative), var(--tooltip-arrow-clip) var(--tooltip-arrow-clip), var(--tooltip-arrow-clip-negative) var(--tooltip-arrow-clip-negative));
    transform: translate(-50%, var(--tooltip-triangle-size)) rotate(-45deg);
}

.tooltip.south[alt]:hover:before {
    transform: translate(-50%, var(--tooltip-arrow-size)) rotate(-45deg);
}

.tooltip.west[alt]:after {
    top: 50%;
    right: 100%;
    transform: translate(var(--tooltip-triangle-size), -50%);
}

.tooltip.west[alt]:hover:after {
    transform: translate(var(--tooltip-triangle-size-negative), -50%);
}

.tooltip.west[alt]:before {
    content: '';
    top: 50%;
    right: 100%;
    clip-path: polygon(var(--tooltip-arrow-clip) var(--tooltip-arrow-clip-negative), var(--tooltip-arrow-clip) var(--tooltip-arrow-clip), var(--tooltip-arrow-clip-negative) var(--tooltip-arrow-clip), var(--tooltip-arrow-clip) var(--tooltip-arrow-clip-negative));
    transform: translate(var(--tooltip-triangle-size-negative), -50%) rotate(-45deg);
}

.tooltip.west[alt]:hover:before {
    transform: translate(var(--tooltip-arrow-size-negative), -50%) rotate(-45deg);
}

/**
    sticky - the tooltip won`t disappear while hovered
 */
.tooltip.sticky[alt]:after,
.tooltip.sticky[alt]:before {
    pointer-events: all;
}

.tooltip.border[alt]:after,
.tooltip.border[alt]:before {
    border-width: var(--tooltip-border-width);
    border-style: var(--tooltip-border-style);
    border-color: var(--tooltip-border-color);
    box-shadow: none;
}