/*
* Tooltip component
*
*/

@import '../../../style/core/utilities.scss';

.dnb-tooltip {
  --tooltip-color: white;
  --tooltip-background-color: black;
  --tooltip-border-color: 1px solid black;
  --tooltip-border-radius: 1rem;

  position: absolute;
  z-index: 3100; // over modal

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 0 1rem;
  color: var(--tooltip-color);

  text-align: center;

  background-color: var(--tooltip-background-color);
  border-radius: var(--tooltip-border-radius);
  @include defaultDropShadow();

  &--large {
    padding: 0.25rem 1rem;
  }

  opacity: 0;
  visibility: hidden;

  transition: opacity 200ms var(--easing-default);

  &--active {
    visibility: visible;

    /*
      because of the first "show" we also use animation
      also, use forwards because of the usage of visibility
    */
    animation: show-tooltip 200ms var(--easing-default) forwards;
  }
  html[data-visual-test] &--active,
  &--active#{&}--no-animation {
    animation: show-tooltip 1ms var(--easing-default) forwards;
  }

  &--hide {
    visibility: visible;
    animation: hide-tooltip 200ms var(--easing-default) forwards;
  }
  &--hide#{&}--no-animation {
    animation: hide-tooltip 1ms linear forwards;
  }

  &--fixed {
    position: fixed;
  }

  html[data-visual-test] &--hide {
    // use a delay before hiding, because of visual tests
    animation: hide-tooltip 1ms linear 1s forwards;
  }

  &__portal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  &__content {
    min-width: 2rem;
    min-height: 1.5rem;

    padding: 0;
  }

  &__arrow {
    position: absolute;
    pointer-events: none;

    margin: 0;

    width: 1rem;
    height: 0.5rem;

    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;

      width: 1rem;
      height: 1rem;
      background-color: var(--tooltip-background-color);

      border: var(--tooltip-border-color);

      transform: translateY(70%) rotate(45deg);
    }

    // default positioning
    &__position--bottom {
      top: -0.5rem;
    }

    &__position--top {
      bottom: -0.5rem;
      transform: rotate(180deg);
    }

    &__position--left {
      right: -0.75rem;
      margin-right: 3px; // border correction
      transform: rotate(90deg);
    }

    &__position--right {
      left: -0.75rem;
      margin-left: 3px; // border correction
      transform: rotate(270deg);
    }

    // overwrite position
    &__arrow--left {
      align-self: flex-start;
    }

    &__arrow--right {
      align-self: flex-end;
    }
  }
}

@keyframes show-tooltip {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hide-tooltip {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}