@import 'vars';

:root {
  --v-tooltip-left: 50%;
  --v-tooltip-top: 0%;
  --v-tooltip-translate: translate(-50%, -110%);
  --v-tooltip-left-offset: 0px;
  --v-tooltip-top-offset: 0px;
  --v-tooltip-width: max-content;
  --v-tooltip-border-radius: 0.4rem;
  --v-tooltip-padding: 0.6em;
  --v-tooltip-font-size: 0.8rem;
  --v-tooltip-border: none;
  --v-tooltip-box-shadow: none;
  --v-tooltip-transition-duration: 0.25s;
  --v-tooltip-transition-delay: 0.3s;
  --v-tooltip-transition-timing-function: ease;
  --v-tooltip-arrow-display: none;
  --v-tooltip-arrow-border-color: var(--c-tooltip-background-color) transparent transparent transparent;
  --v-tooltip-arrow-top: calc(var(--v-tooltip-top) - var(--v-tooltip-top-offset) + 7px);
  --v-tooltip-arrow-left: calc(var(--v-tooltip-left) - var(--v-tooltip-left-offset));
}
.data-v-tooltip {
  position: relative;
}

.data-v-tooltip::after {
  z-index: 2147483647;
  content: attr(data-v-tooltip);
  position: absolute;
  left: calc(var(--v-tooltip-left) - var(--v-tooltip-left-offset));
  top: calc(var(--v-tooltip-top) - var(--v-tooltip-top-offset));
  transform: var(--v-tooltip-translate);
  width: var(--v-tooltip-width);
  background-color: var(--c-tooltip-background-color);
  color: var(--c-bg);
  border-radius: var(--v-tooltip-border-radius);
  padding: var(--v-tooltip-padding);
  font-size: var(--v-tooltip-font-size);
  border: var(--v-tooltip-border);
  box-shadow: var(--v-tooltip-box-shadow);
  transition-property: all;
  transition-duration: var(--v-tooltip-transition-duration);
  transition-delay: 0s;
  transition-timing-function: var(--v-tooltip-transition-timing-function);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* arrow */
.data-v-tooltip::before {
  z-index: 2147483647;
  content: '';
  position: absolute;
  display: var(--v-tooltip-arrow-display);
  left: var(--v-tooltip-arrow-left);
  top: var(--v-tooltip-arrow-top);
  transform: var(--v-tooltip-translate);
  border-width: 5px;
  border-style: solid;
  border-color: var(--v-tooltip-arrow-border-color);
  transition-property: all;
  transition-duration: var(--v-tooltip-transition-duration);
  transition-delay: 0s;
  transition-timing-function: var(--v-tooltip-transition-timing-function);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.data-v-tooltip:hover,
.data-v-tooltip:hover {
  &::after,
  &::before {
    transition-duration: var(--v-tooltip-transition-duration);
    transition-delay: var(--v-tooltip-transition-delay);
    transition-timing-function: var(--v-tooltip-transition-timing-function);
    opacity: 1;
    visibility: visible;
  }
}