@layer kz-components {
  .tooltip {
    max-width: 200px;
    padding: var(--spacing-8) var(--spacing-12);
    color: var(--color-white);
    text-align: center;
    font-family: var(--typography-paragraph-extra-small-font-family);
    font-size: var(--typography-paragraph-extra-small-font-size);
    font-weight: var(--typography-paragraph-extra-small-font-weight);
    letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
    line-height: var(--typography-paragraph-extra-small-line-height);
    border-radius: var(--border-solid-border-radius);
    box-shadow: var(--shadow-small-box-shadow);
    background-color: var(--color-purple-800);
    text-wrap: pretty;

    /* fixes FF gap */
    transform: translate3d(0, 0, 0);

    &.reversed {
      background-color: var(--color-white);
      color: var(--color-purple-800);
    }

    &[data-placement='top'] {
      --origin: translateY(4px);
    }

    &[data-placement='bottom'] {
      --origin: translateY(-4px);
    }

    &[data-placement='right'] {
      --origin: translateX(-4px);
    }

    &[data-placement='left'] {
      --origin: translateX(4px);
    }

    &[data-entering] {
      animation: slide var(--animation-duration-fast);
    }

    &[data-exiting] {
      animation: slide var(--animation-duration-fast) reverse
        var(--animation-easing-function-ease-in);
    }
  }
}

@keyframes slide {
  from {
    transform: var(--origin);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}