/**
 * Tooltips
 * Custom tooltip overrides for Pico CSS data-tooltip attributes.
 */

[data-tooltip]:not([data-position])::after {
  margin-bottom: unset !important;
}

[data-tooltip]:not([data-position])::before {
  top: unset !important;
  right: unset !important;
  margin-left: unset !important;
  margin-bottom: unset !important;
}

[data-tooltip]::after,
[data-tooltip]::before {
  transition: unset !important;
}

[data-tooltip]:hover::before {
  transform: translate(-50%, -0.25rem) !important;
}

[data-tooltip]:not(a, button, input) {
  border-bottom: unset;
  text-decoration: unset;
  cursor: help;
}

[data-tooltip]::before {
  transform: unset !important;
  transform-origin: unset !important;
}

[data-tooltip]::before {
  width: unset !important;
  height: unset !important;
  box-shadow: unset !important;
}

[data-tooltip]::after {
  pointer-events: unset !important;
  content: inherit !important;
  position: unset !important;
  text-transform: unset !important;
  text-align: unset !important;
  text-shadow: unset !important;
  white-space: unset !important;
  border: unset !important;
  line-height: unset !important;
  max-width: unset !important;
  background: unset !important;
  padding: unset !important;
  font-weight: unset !important;
  font-style: unset !important;
  color: unset !important;
  border-radius: unset !important;
  box-shadow: unset !important;
  z-index: 1900 !important;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  visibility: unset;
  pointer-events: unset;
  opacity: 1;
}

[data-tooltip]::after {
  transform-origin: unset;
}

[data-tooltip]:hover::after,
[data-tooltip][data-position="bottom center"]:hover::after {
  transform: unset !important;
}

[data-tooltip]::after,
[data-tooltip]::before,
[data-tooltip][data-placement="top"]::after,
[data-tooltip][data-placement="top"]::before {
  display: block;
  z-index: 99;
  position: absolute;
  bottom: 100% !important;
  left: 50% !important;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
  transform: translate(-50%, -0.25rem) !important;
  border-radius: var(--pico-border-radius);
  background: var(--pico-tooltip-background-color) !important;
  content: attr(data-tooltip);
  color: var(--pico-tooltip-color);
  font-style: normal;
  font-weight: var(--pico-font-weight);
  font-size: 0.875rem;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 99999 !important;
}

[data-tooltip][data-placement="right"]::after,
[data-tooltip][data-placement="right"]::before {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 100% !important;
  transform: translate(0.25rem, -50%) !important;
}
