// =====================================================================================
//
// tooltip_01
//
// =====================================================================================

@use 'scss/global' as g;

.tooltip_01--content {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);

  &.is_ready {
    display: inline-block;
  }

  &-top {
    &::before {
      position: absolute;
      bottom: -16px;
      left: 50%;
      content: '';
      border: 8px solid transparent;
      border-top: 8px solid #ddd;
      transform: translateX(-50%);
    }

    &::after {
      position: absolute;
      bottom: -12px;
      left: 50%;
      content: '';
      border: 6px solid transparent;
      border-top: 6px solid #fff;
      transform: translateX(-50%);
    }
  }

  &-bottom {
    &::before {
      position: absolute;
      top: -16px;
      left: 50%;
      content: '';
      border: 8px solid transparent;
      border-bottom: 8px solid #ddd;
      transform: translateX(-50%);
    }

    &::after {
      position: absolute;
      top: -12px;
      left: 50%;
      content: '';
      border: 6px solid transparent;
      border-bottom: 6px solid #fff;
      transform: translateX(-50%);
    }
  }

  &-left {
    &::before {
      position: absolute;
      top: 50%;
      right: -8px;
      content: '';
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid #ddd;
      transform: translateY(-50%);
    }

    &::after {
      position: absolute;
      top: 50%;
      right: -6px;
      content: '';
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 6px solid #fff;
      transform: translateY(-50%);
    }
  }

  &-right {
    &::before {
      position: absolute;
      top: 50%;
      left: -8px;
      content: '';
      border-top: 8px solid transparent;
      border-right: 8px solid #ddd;
      border-bottom: 8px solid transparent;
      transform: translateY(-50%);
    }

    &::after {
      position: absolute;
      top: 50%;
      left: -6px;
      content: '';
      border-top: 6px solid transparent;
      border-right: 6px solid #fff;
      border-bottom: 6px solid transparent;
      transform: translateY(-50%);
    }
  }
}

@keyframes tooltip_01_top {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tooltip_01_bottom {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tooltip_01_left {
  from {
    opacity: 0;
    transform: translateX(5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes tooltip_01_right {
  from {
    opacity: 0;
    transform: translateX(-5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tooltip_01-show_anim_top {
  animation: tooltip_01_top 0.2s ease-out;
}

.tooltip_01-hide_anim_top {
  animation: tooltip_01_top 0.1s ease-in reverse;
}

.tooltip_01-show_anim_bottom {
  animation: tooltip_01_bottom 0.2s ease-out;
}

.tooltip_01-hide_anim_bottom {
  animation: tooltip_01_bottom 0.1s ease-in reverse;
}

.tooltip_01-show_anim_left {
  animation: tooltip_01_left 0.2s ease-out;
}

.tooltip_01-hide_anim_left {
  animation: tooltip_01_left 0.1s ease-in reverse;
}

.tooltip_01-show_anim_right {
  animation: tooltip_01_right 0.2s ease-out;
}

.tooltip_01-hide_anim_right {
  animation: tooltip_01_right 0.1s ease-in reverse;
}