[data-tooltip-top],
[data-tooltip-bottom],
[data-tooltip-left],
[data-tooltip-right] {
   position: relative;
}

[data-tooltip-top]::before,
[data-tooltip-top]::after,
[data-tooltip-bottom]::before,
[data-tooltip-bottom]::after,
[data-tooltip-left]::before,
[data-tooltip-left]::after,
[data-tooltip-right]::before,
[data-tooltip-right]::after {
   --scale: 0;
   position: absolute;
   display: inline-block;
   transition: var(--tooltip-transition-speed) transform;
}

[data-tooltip-top]::before,
[data-tooltip-top]::after {
   top: var(--tooltip-margin);
   left: 50%;
   transform: translateX(-50%) translateY(var(--tooltip-arrow-translate-y, 0)) scale(var(--scale));
   transform-origin: bottom center;
}

[data-tooltip-bottom]::before,
[data-tooltip-bottom]::after {
   bottom: var(--tooltip-margin);
   left: 50%;
   transform: translateX(-50%) translateY(var(--tooltip-arrow-translate-y, 0)) scale(var(--scale));
   transform-origin: top center;
}

[data-tooltip-left]::before,
[data-tooltip-left]::after {
   top: 50%;
   left: var(--tooltip-margin);
   transform: translateX(var(--tooltip-arrow-translate-x, 0)) translateY(-50%) scale(var(--scale));
   transform-origin: center right;
}

[data-tooltip-right]::before,
[data-tooltip-right]::after {
   top: 50%;
   right: var(--tooltip-margin);
   transform: translateX(var(--tooltip-arrow-translate-x, 0)) translateY(-50%) scale(var(--scale));
   transform-origin: center left;
}

[data-tooltip-top]::before,
[data-tooltip-bottom]::before,
[data-tooltip-left]::before,
[data-tooltip-right]::before {
   padding: var(--tooltip-padding) calc(2 * var(--tooltip-padding));
   color: var(--tooltip-color);
   width: max-content;
   text-align: var(--tooltip-text-align);
   background-color: var(--tooltip-background-color);
   border-radius: var(--tooltip-border-radius);
   font-size: var(--tooltip-font-size);
}

[data-tooltip-top]::before {
   --tooltip-arrow-translate-y: calc(-100% - var(--tooltip-arrow-size));
   content: attr(data-tooltip-top);
}

[data-tooltip-bottom]::before {
   --tooltip-arrow-translate-y: calc(100% + var(--tooltip-arrow-size));
   content: attr(data-tooltip-bottom);
}

[data-tooltip-left]::before {
   --tooltip-arrow-translate-x: calc(-100% - var(--tooltip-arrow-size));
   content: attr(data-tooltip-left);
}

[data-tooltip-right]::before {
   --tooltip-arrow-translate-x: calc(100% + var(--tooltip-arrow-size));
   content: attr(data-tooltip-right);
}

/* Tooltip arrows */
[data-tooltip-top]::after,
[data-tooltip-bottom]::after,
[data-tooltip-left]::after,
[data-tooltip-right]::after {
   content: '';
   border: var(--tooltip-arrow-size) solid transparent;
}

[data-tooltip-top]::after {
   --tooltip-arrow-translate-y: calc(-1 * var(--tooltip-arrow-size));
   border-top-color: var(--tooltip-background-color);
   transform-origin: top center;
}

[data-tooltip-bottom]::after {
   --tooltip-arrow-translate-y: var(--tooltip-arrow-size);
   border-bottom-color: var(--tooltip-background-color);
   transform-origin: bottom center;
}

[data-tooltip-left]::after {
   --tooltip-arrow-translate-x: calc(-1 * var(--tooltip-arrow-size));
   border-left-color: var(--tooltip-background-color);
   transform-origin: center left;
}

[data-tooltip-right]::after {
   --tooltip-arrow-translate-x: var(--tooltip-arrow-size);
   border-right-color: var(--tooltip-background-color);
   transform-origin: center right;
}

/* Show tooltip on Hover */
[data-tooltip-top]:hover::before,
[data-tooltip-top]:hover::after,
[data-tooltip-bottom]:hover::before,
[data-tooltip-bottom]:hover::after,
[data-tooltip-left]:hover::before,
[data-tooltip-left]:hover::after,
[data-tooltip-right]:hover::before,
[data-tooltip-right]:hover::after {
   --scale: 1;
}