/* ==========================================================================
 * Tooltip
 * ========================================================================== */

@keyframes mds-c-tooltip-animation-bottom {
  from {
    opacity: 0;
    transform: scale(var(--animation-scale))
      translateY(calc(var(--animation-transform) * -1));
  }

  to {
    opacity: 1;
    transform: scale(1) translate(0);
  }
}

@keyframes mds-c-tooltip-animation-left {
  from {
    opacity: 0;
    transform: scale(var(--animation-scale))
      translateX(var(--animation-transform));
  }

  to {
    opacity: 1;
    transform: scale(1) translate(0);
  }
}

@keyframes mds-c-tooltip-animation-right {
  from {
    opacity: 0;
    transform: scale(var(--animation-scale))
      translateX(calc(var(--animation-transform) * -1));
  }

  to {
    opacity: 1;
    transform: scale(1) translate(0);
  }
}

@keyframes mds-c-tooltip-animation-top {
  from {
    opacity: 0;
    transform: scale(var(--animation-scale))
      translateY(var(--animation-transform));
  }

  to {
    opacity: 1;
    transform: scale(1) translate(0);
  }
}

.mds-c-tooltip-wrapper {
  pointer-events: none;
  position: absolute;
  z-index: $z-index--tooltip;

  &.mds-is-hoverable {
    cursor: default;
    pointer-events: auto;
  }
}

.mds-c-tooltip {
  --animation-delay: 0.35s;
  --animation-duration: 0.2s;
  --animation-scale: 0.9;
  --animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1.1);
  --animation-transform: var(--mds-d-spacing--med);
  --arrow-width: 0.5rem;
  --background-color: var(--mds-t-tooltip-background-color);
  --transform-origin: var(--transform-origin-x, center)
    var(--transform-origin-y, center);

  animation-fill-mode: forwards;
  background-color: var(--background-color);
  border-radius: var(--mds-d-border-radius--default);
  color: var(--mds-t-tooltip-text-color);
  filter: drop-shadow(var(--mds-d-elevation--4));
  font-size: var(--mds-d-font-size--sm);
  font-weight: var(--mds-d-font-weight--medium);
  line-height: 1.3;
  max-width: 12rem;
  opacity: 0;
  padding: var(--mds-d-spacing--xs) var(--mds-d-spacing--sm);
  position: relative;
  transform-origin: var(--transform-origin);

  &--max-width-sm {
    max-width: 12rem;
  }

  &--max-width-med {
    max-width: 16rem;
  }

  &--max-width-lg {
    max-width: 20rem;
  }

  &::before {
    border-color: transparent;
    border-style: solid;
    border-width: var(--arrow-width);
    content: '';
    display: block;
    margin: 1px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  /*
   * Add spacing between Tooltip and its target.
   */

  [data-tooltip-alignment='bottom'] &,
  [data-tooltip-alignment='top'] & {
    margin-left: var(--mds-d-spacing--med);
    margin-right: var(--mds-d-spacing--med);
  }

  [data-tooltip-alignment='left'] &,
  [data-tooltip-alignment='right'] & {
    margin-bottom: var(--mds-d-spacing--med);
    margin-top: var(--mds-d-spacing--med);
  }

  [data-tooltip-alignment='center'] & {
    margin: var(--mds-d-spacing--med);
  }

  .mds-is-expanded > & {
    animation-delay: var(--animation-delay);
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--animation-timing-function);
    transition-delay: var(--animation-delay);
  }

  .mds-is-element-attached-bottom & {
    --transform-origin-x: bottom;
  }

  .mds-is-element-attached-left & {
    --transform-origin-y: left;
  }

  .mds-is-element-attached-right & {
    --transform-origin-y: right;
  }

  .mds-is-element-attached-top & {
    --transform-origin-x: top;
  }

  /*
   * Set direction of tooltip arrow.
   */

  /* Bottom */
  .mds-is-target-attached-bottom[data-tooltip-direction='bottom'] &,
  .mds-is-target-attached-bottom[data-tooltip-direction='top'] & {
    &::before {
      border-bottom-color: var(--background-color);
      top: calc(-1rem - 1px);
    }
  }

  /* Left */
  .mds-is-target-attached-left[data-tooltip-direction='left'] &,
  .mds-is-target-attached-left[data-tooltip-direction='right'] & {
    &::before {
      border-left-color: var(--background-color);
      right: calc((var(--arrow-width) * -2) + 1px);
    }
  }

  /* Right */
  .mds-is-target-attached-right[data-tooltip-direction='left'] &,
  .mds-is-target-attached-right[data-tooltip-direction='right'] & {
    &::before {
      border-right-color: var(--background-color);
      left: calc((var(--arrow-width) * -2) + 1px);
    }
  }

  /* Top */
  .mds-is-target-attached-top[data-tooltip-direction='bottom'] &,
  .mds-is-target-attached-top[data-tooltip-direction='top'] & {
    &::before {
      border-top-color: var(--background-color);
      bottom: calc(-1rem - 1px);
      top: auto;
    }
  }

  /*
   * Set alignment of tooltip arrow.
   */

  /* Left */
  .mds-is-target-attached-bottom[data-tooltip-alignment='left'] &,
  .mds-is-target-attached-top[data-tooltip-alignment='left'] & {
    &::before {
      left: var(--mds-d-spacing--med);
    }
  }

  /* Center */
  .mds-is-target-attached-bottom[data-tooltip-alignment='center'] &,
  .mds-is-target-attached-top[data-tooltip-alignment='center'] & {
    &::before {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* Right */
  .mds-is-target-attached-bottom[data-tooltip-alignment='right'] &,
  .mds-is-target-attached-top[data-tooltip-alignment='right'] & {
    &::before {
      right: var(--mds-d-spacing--med);
    }
  }

  /* Bottom */
  .mds-is-expanded.mds-is-target-attached-bottom[data-tooltip-direction='bottom']
    > &,
  .mds-is-expanded.mds-is-target-attached-bottom[data-tooltip-direction='top']
    > & {
    animation-name: mds-c-tooltip-animation-bottom;
  }

  /* Left */
  .mds-is-expanded.mds-is-target-attached-left[data-tooltip-direction='left']
    > &,
  .mds-is-expanded.mds-is-target-attached-left[data-tooltip-direction='right']
    > & {
    animation-name: mds-c-tooltip-animation-left;
  }

  /* Right */
  .mds-is-expanded.mds-is-target-attached-right[data-tooltip-direction='left']
    > &,
  .mds-is-expanded.mds-is-target-attached-right[data-tooltip-direction='right']
    > & {
    animation-name: mds-c-tooltip-animation-right;
  }

  /* Top */
  .mds-is-expanded.mds-is-target-attached-top[data-tooltip-direction='bottom']
    > &,
  .mds-is-expanded.mds-is-target-attached-top[data-tooltip-direction='top']
    > & {
    animation-name: mds-c-tooltip-animation-top;
  }
}