@keyframes ld-tooltip-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ld-tooltip-hide {
  to {
    visibility: hidden;
  }
}

.ld-tooltip {
  :host(&) {
    /* TODO: move to global vars? */
    --ld-zi-max: 2147483647; /* max z-index */

    --ld-tooltip-animation-duration: 0s;
    --ld-tooltip-distance-from-trigger: var(--ld-sp-8);
    --ld-tooltip-max-width: 20rem;
    /* calculation does not work, if 0 is used instead of 0px */
    --ld-tooltip-offset-x: 0px;
    --ld-tooltip-offset-y: 0px;

    --ld-tooltip-padding: var(--ld-sp-16);
    --ld-tooltip-sm-padding: var(--ld-sp-6) var(--ld-sp-8);

    /* colors */
    --tooltip-col: var(--ld-col-neutral-900);
    --tooltip-bg-col: var(--ld-col-wht);

    animation: ld-tooltip-hide 0s ease var(--ld-tooltip-animation-duration);
    animation-fill-mode: forwards;
    margin-left: var(--ld-tooltip-offset-x);
    margin-top: var(--ld-tooltip-offset-y);
    max-width: var(--ld-tooltip-max-width);
    opacity: 0;
    pointer-events: none;
    position: relative;
    transition: opacity var(--ld-tooltip-animation-duration) ease-in;
    z-index: var(--ld-zi-max);
  }

  &:not(.ld-tooltip--unstyled) {
    :host(&) {
      background-color: var(--tooltip-bg-col);
      border-radius: var(--ld-br-m);
      color: var(--tooltip-col);
      filter: var(--ld-drop-shadow-hover);
      padding: var(--ld-tooltip-padding);
    }
  }

  &--initialized {
    :host(&) {
      @media (prefers-reduced-motion: no-preference) {
        --ld-tooltip-animation-duration: var(--ld-transition-duration-normal);
      }
    }
  }

  &--sm {
    :host(&) {
      --ld-tooltip-padding: var(--ld-tooltip-sm-padding);
    }
  }

  &--with-arrow {
    :host(&) {
      --ld-tooltip-arrow-size: 0.5rem;
      --ld-tooltip-arrow-offset: var(--ld-sp-16);
      --ld-tooltip-distance-from-trigger: calc(
        var(--ld-tooltip-arrow-size) + var(--ld-sp-8)
      );
    }
  }

  &--interactive {
    :host(&) {
      pointer-events: auto;
    }
  }

  &.ld-tether-enabled {
    :host(&) {
      animation: ld-tooltip-show var(--ld-tooltip-animation-duration) ease-out;
      opacity: 1;
    }
  }

  &.ld-tether-element-attached-bottom {
    :host(&) {
      .ld-tooltip__arrow {
        bottom: var(--ld-tooltip-arrow-offset);
      }
    }

    &.ld-tether-target-attached-top {
      :host(&) {
        margin-top: calc(
          var(--ld-tooltip-distance-from-trigger) * -1 -
            var(--ld-tooltip-offset-y)
        );

        .ld-tooltip__arrow {
          border-top-color: var(--tooltip-bg-col);
          top: 100%;
        }
      }
    }
  }

  &.ld-tether-element-attached-center {
    :host(&) {
      .ld-tooltip__arrow {
        left: calc(50% - var(--ld-tooltip-arrow-size));
      }
    }
  }

  &.ld-tether-element-attached-left.ld-tether-target-attached-right {
    :host(&) {
      margin-left: calc(
        var(--ld-tooltip-offset-x) + var(--ld-tooltip-distance-from-trigger)
      );

      .ld-tooltip__arrow {
        border-right-color: var(--tooltip-bg-col);
        right: 100%;
      }
    }
  }

  &.ld-tether-element-attached-middle {
    :host(&) {
      .ld-tooltip__arrow {
        top: calc(50% - var(--ld-tooltip-arrow-size));
      }
    }
  }

  &.ld-tether-element-attached-right {
    :host(&) {
      .ld-tooltip__arrow {
        right: var(--ld-tooltip-arrow-offset);
      }
    }

    &.ld-tether-target-attached-left {
      :host(&) {
        margin-left: calc(
          var(--ld-tooltip-distance-from-trigger) * -1 -
            var(--ld-tooltip-offset-x)
        );

        .ld-tooltip__arrow {
          border-left-color: var(--tooltip-bg-col);
          left: 100%;
        }
      }
    }
  }

  &.ld-tether-element-attached-top.ld-tether-target-attached-bottom {
    :host(&) {
      margin-top: calc(
        var(--ld-tooltip-distance-from-trigger) + var(--ld-tooltip-offset-y)
      );
      .ld-tooltip__arrow {
        border-bottom-color: var(--tooltip-bg-col);
        bottom: 100%;
      }
    }
  }
}

.ld-tooltip--with-default-trigger:where(.ld-tooltip--with-arrow) {
  &:where(.ld-tether-element-attached-top.ld-tether-target-attached-bottom),
  &:where(.ld-tether-element-attached-bottom.ld-tether-target-attached-top) {
    &:where(.ld-tether-element-attached-right) {
      :host(&) {
        --ld-tooltip-offset-x: 1rem;
      }
    }

    &:where(.ld-tether-element-attached-left) {
      :host(&) {
        --ld-tooltip-offset-x: -1rem;
      }
    }
  }

  &:where(.ld-tether-element-attached-right.ld-tether-target-attached-left),
  &:where(.ld-tether-element-attached-left.ld-tether-target-attached-right) {
    &:where(.ld-tether-element-attached-bottom) {
      :host(&) {
        --ld-tooltip-offset-y: 1rem;
      }
    }

    &:where(.ld-tether-element-attached-top) {
      :host(&) {
        --ld-tooltip-offset-y: -1rem;
      }
    }
  }
}

.ld-tooltip__arrow {
  border: var(--ld-tooltip-arrow-size) solid transparent;
  position: absolute;
}
