:root {
  --ttcolor: var(--color-bg-lighter);
  --ttbgcolor: var(--color-text-darker);
}

[tooltip-lbl][tooltip-pos] {
  position: relative;
}

[tooltip-lbl][tooltip-pos]::before {
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  opacity: 0;
  transition: 0.1s all;
  transition: all 0.18s ease-out 0.18s;
  border: 5px solid transparent;
  z-index: 10;
}

[tooltip-lbl][tooltip-pos]::after {
  content: attr(tooltip-lbl);
  position: absolute;
  padding: 10px;
  color: var(--ttcolor);
  opacity: 0;
  transition: 0.1s all;
  white-space: nowrap;
  transition: all 0.18s ease-out 0.18s;
  z-index: 10;
  pointer-events: none;
  border-radius: 4px;
  background-color: var(--ttbgcolor);
  font-size: 0.695rem;
  font-weight: 300;
  line-height: 1.2;
  max-width: 10rem;
}

[tooltip-lbl][tooltip-pos]:hover::before,
[tooltip-lbl][tooltip-pos]:hover::after {
  opacity: 1;
  pointer-events: none;
}

[tooltip-lbl][tooltip-pos][tooltip-pos="top"]:hover::before,
[tooltip-lbl][tooltip-pos][tooltip-pos="top"]:hover::after,
[tooltip-lbl][tooltip-pos][tooltip-pos="bottom"]:hover::before,
[tooltip-lbl][tooltip-pos][tooltip-pos="bottom"]:hover::after {
  transform: translate(-50%, 0);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]::after,
[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]::before {
  bottom: 100%;
  transform-origin: top;
  transform: translate(0, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]::after {
  margin-bottom: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]::before {
  border-top-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="top"]::before,
[tooltip-lbl][tooltip-pos][tooltip-pos="top"]::after {
  left: 50%;
  transform: translate(-50%, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="top"]::before {
  border: 5px solid transparent;
  border-top-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="top"]::after {
  margin-bottom: 10px;
}

/* --Bottom-- */
[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]::after,
[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]::before {
  top: 100%;
  transform-origin: bottom;
  transform: translate(0, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]::after {
  margin-top: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]::before {
  border-bottom-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="bottom"]::before,
[tooltip-lbl][tooltip-pos][tooltip-pos="bottom"]::after {
  left: 50%;
  top: 100%;
  transform: translate(-50%, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="bottom"]::before {
  border: 5px solid transparent;
  border-bottom-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="bottom"]::after {
  margin-top: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos="left"]::before,
[tooltip-lbl][tooltip-pos][tooltip-pos="left"]::after {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="left"]::before {
  border: 5px solid transparent;
  border-left-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="left"]::after {
  margin-right: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos="left"]:hover::before,
[tooltip-lbl][tooltip-pos][tooltip-pos="left"]:hover::after {
  right: 100%;
  top: 50%;
  transform: translate(4px, -50%);
  transform-origin: bottom;
}

[tooltip-lbl][tooltip-pos][tooltip-pos="right"]::before,
[tooltip-lbl][tooltip-pos][tooltip-pos="right"]::after {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="right"]::before {
  border: 5px solid transparent;
  border-right-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos="right"]::after {
  margin-left: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos="right"]:hover::before,
[tooltip-lbl][tooltip-pos][tooltip-pos="right"]:hover::after {
  left: 100%;
  top: 50%;
  transform: translate(4px, -50%);
  transform-origin: bottom;
}

/* --Right-- */

[tooltip-lbl][tooltip-pos][tooltip-pos*="-right"]::after {
  right: 0;
}

[tooltip-lbl][tooltip-pos][tooltip-pos*="-right"]::before {
  right: 5px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos*="-right"]:hover::after,
[tooltip-lbl][tooltip-pos][tooltip-pos*="-right"]:hover::before,
[tooltip-lbl][tooltip-pos][tooltip-pos*="-left"]:hover::after,
[tooltip-lbl][tooltip-pos][tooltip-pos*="-left"]:hover::before {
  transform: translate(0, 0);
}

[tooltip-lbl][tooltip-pos][tooltip-pos*="-left"]::after {
  left: 0;
}

[tooltip-lbl][tooltip-pos][tooltip-pos*="-left"]::before {
  left: 5px;
}

[tooltip-lbl][tooltip-size="sm"]::after {
  white-space: normal;
  width: 90px;
}

[tooltip-lbl][tooltip-size="md"]::after {
  white-space: normal;
  width: 150px;
}

[tooltip-lbl][tooltip-size="lg"]::after {
  white-space: normal;
  width: 260px;
}

[tooltip-lbl][tooltip-size="xlg"]::after {
  white-space: normal;
  width: 380px;
}

[tooltip-lbl][tooltip-size="fit"]::after {
  white-space: normal;
  width: 100%;
}