.mykn-tooltip {
  transition: all 0.5s;
  transform: scale(0.8);
  opacity: 0;
  border-radius: var(--sizes-border-radius-s);
  background-color: var(--tooltip-background);
  border: 2px solid var(--tooltip-border);
  z-index: -1 !important;

  &--open {
    opacity: 1;
    transform: scale(1);
    z-index: 1000 !important;
  }

  &__arrow {
    fill: var(--tooltip-border);
  }

  &__content {
    padding: var(--sizes-spacing-xs-h) var(--sizes-spacing-xs-v);
    box-sizing: border-box;
    overflow-wrap: break-word;

    &--sm {
      max-width: 200px;
    }

    &--md {
      max-width: 400px;
    }

    &--lg {
      max-width: 600px;
    }
  }
}