.tooltip {
}

.tooltip--follow-cursor {
  pointer-events: none;
}

.tooltip__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  border-radius: var(--aligment-element-border-radius-primary-top-left)
    var(--aligment-element-border-radius-primary-top-right)
    var(--aligment-element-border-radius-primary-bottom-right)
    var(--aligment-element-border-radius-primary-bottom-left);
}

.tooltip__alignment-element {
  background: transparent;
  position: relative;
  display: flex;
  min-width: var(--aligment-element-min-width);
  min-height: var(--aligment-element-min-height);
  padding: var(--aligment-element-padding-top)
    var(--aligment-element-padding-right) var(--aligment-element-padding-bottom)
    var(--aligment-element-padding-left);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--aligment-element-gap);
  z-index: 2;
  border-radius: var(--aligment-element-border-radius-primary-top-left)
    var(--aligment-element-border-radius-primary-top-right)
    var(--aligment-element-border-radius-primary-bottom-right)
    var(--aligment-element-border-radius-primary-bottom-left);
}

.tooltip__element-labels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--element-labels-padding-top, 3px)
    var(--element-labels-padding-right, 4px)
    var(--element-labels-padding-bottom, 3px)
    var(--element-labels-padding-left, 4px);
  gap: var(--element-labels-gap, 0px);
}

.tooltip__element-labels--align-left {
  align-items: flex-start;
  text-align: left;
}

.tooltip__element-labels--align-middle {
  align-items: center;
  text-align: center;
}

.tooltip__element-labels--align-right {
  align-items: flex-end;
  text-align: right;
}

.tooltip__label {
  display: flex;
  align-items: flex-start;
}

.tooltip__sublabel {
  display: flex;
  align-items: flex-start;
}

.tooltip .tooltip__arrow {
  fill: var(--v0-rt-surface-color);
}

.animation-slide-enter {
  .tooltip__alignment-element,
  .tooltip__bg {
    opacity: 0;
    transform: translateY(-20px);
  }
  .tooltip__bg {
    height: 0%;
  }
  .tooltip__arrow {
    opacity: 0;
  }
}

.animation-slide-enter-active {
  .tooltip__alignment-element {
    transition-delay: 40ms;
  }
  .tooltip__alignment-element,
  .tooltip__bg {
    opacity: 1;
    transform: translateY(0px);
    transition: 250ms ease-out;
  }
  .tooltip__bg {
    height: 100%;
  }
  .tooltip__arrow {
    transition: opacity 250ms ease-in;
    opacity: 1;
  }
}

.animation-slide-exit {
  .tooltip__alignment-element,
  .tooltip__bg {
    opacity: 1;
    transform: translateY(0px);
  }
  .tooltip__bg {
    height: 100%;
  }
  .tooltip__arrow {
    opacity: 1;
  }
}

.animation-slide-exit-active {
  .tooltip__alignment-element,
  .tooltip__bg {
    opacity: 0;
    transform: translateY(-20px);
    transition: 250ms ease-out;
  }
  .tooltip__alignment-element {
    transition-delay: 40ms;
  }
  .tooltip__bg {
    height: 0%;
  }
  .tooltip__arrow {
    opacity: 0;
  }
}

.animation-smooth-enter {
  opacity: 0;
  transform: translateY(-20px);
}

.animation-smooth-enter-active {
  opacity: 1;
  transform: translateY(0px);
  transition: 250ms ease-out;
}

.animation-smooth-exit {
  opacity: 1;
  transform: translateY(0px);
}

.animation-smooth-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: 250ms ease-out;
}

.animation-fade-enter {
  opacity: 0;
}

.animation-fade-enter-active {
  opacity: 1;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.animation-fade-exit-active {
  visibility: hidden;
}