[data-microtip-position] {
  position: relative;
}
[data-microtip-position]:before,
[data-microtip-position]:after {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  z-index: 60;
}
[data-microtip-position]:before {
  background: #182640;
  border-radius: 4px;
  color: #fff;
  content: attr(aria-label);
  font:
    500 12px/1.3 Barlow,
    sans-serif;
  padding: 7px 9px;
  white-space: nowrap;
}
[data-microtip-position]:after {
  border: 5px solid transparent;
  content: "";
}
[data-microtip-position]:hover:before,
[data-microtip-position]:hover:after,
[data-microtip-position]:focus-visible:before,
[data-microtip-position]:focus-visible:after {
  opacity: 1;
}
[data-microtip-position="top"]:before {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
}
[data-microtip-position="top"]:after {
  border-top-color: #182640;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
}
[data-microtip-position="top"]:hover:before,
[data-microtip-position="top"]:hover:after,
[data-microtip-position="top"]:focus-visible:before,
[data-microtip-position="top"]:focus-visible:after {
  transform: translate(-50%, 0);
}