.tooltip-hover-wrap {
  cursor: pointer;
  // background-color: red;
  position: relative !important;
  width: max-content;

  &:hover .tool-tip-wrap {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@mixin tool-tip-wrap(
  $bg-color: #020202,
  $padding: $base-padding $base-padding,
  $radius: $base-btn-border-radius
) {
  width: max-content;
  max-width: 27rem;
  font-size: 1.3rem;
  display: flex;
  border-radius: $base-border-radius;
  flex-direction: column;
  //   gap: 1rem;
  padding: 1.2rem 1.6rem;
  background-color: $bg-color;
  position: relative;
  justify-content: center;
  position: absolute;
  color: #ffffff;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  opacity: 0.7;

  &::after {
    content: "";
    position: absolute;
    // top: 0%;
    // left: 2rem;
    width: 1.1rem;
    height: 1.1rem;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  }

  .img-box {
    width: 10rem;
    height: 6rem;
    position: absolute;
    top: 1rem;
    right: 0rem;
    transform: translateX(15%);

    .img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .got {
    // color: #ffffff;
    align-self: flex-end;
    margin-top: 0.7rem;
    font-size: 1.35rem;
    font-weight: 600;
  }

  .text {
    // color: #e5e6e6;
    font-size: 1.2rem;
    font-weight: 400;
  }

  .title {
    font-weight: 800;
    margin-bottom: 0.6rem;
    // color: #ffffff;
    font-size: 1.5rem;
    text-transform: capitalize
  }
}

@each $key, $val in $colors {
  .tool-tip-wrap__#{$key} {
    @include tool-tip-wrap;
    // color: $val;
    // position: absolute;
    font-weight: 800;
    background-color: $val;

    &::after {
      background-color: $val;
    }
  }

  .tool-tip-wrap_big {
    padding: 2.4rem 1.6rem;
  }

  .tool-tip-wrap_top-center {
    bottom: 100% !important;
    left: 50% !important;
    right: unset;
    transform: translateY(-2rem) translateX(-50%);

    &::after {
      top: 100%;
      left: 50%;
      transform: rotateX(180deg) translateX(-50%);
    }
  }

  .tool-tip-wrap_top-right {
    bottom: 100%;
    left: 100%;
    transform: translateY(-2rem) translateX(-15%);

    &::after {
      top: 100%;
      left: 12%;
      transform: rotateX(180deg) translateX(-50%);
    }
  }

  .tool-tip-wrap_top-left {
    bottom: 100%;
    left: 0%;
    transform: translateY(-2rem) translateX(-85%);

    &::after {
      top: 100%;
      left: 88%;
      transform: rotateX(180deg) translateX(-50%);
    }
  }

  .tool-tip-wrap_bottom-center {
    top: 100%;
    left: 50%;
    transform: translateY(2rem) translateX(-50%);

    &::after {
      top: 0%;
      left: 50%;
      transform: translateY(-100%) translateX(-50%);
    }
  }

  .tool-tip-wrap_bottom-left {
    top: 100%;
    left: 0%;
    transform: translateY(2rem) translateX(-85%);

    &::after {
      top: 0%;
      left: 88%;
      transform: translateY(-100%) translateX(-50%);
    }
  }

  .tool-tip-wrap_bottom-right {
    top: 100%;
    left: 100%;
    transform: translateY(2rem) translateX(-20%);

    &::after {
      top: 0%;
      left: 12%;
      transform: translateY(-100%) translateX(0%);
    }
  }

  .tool-tip-wrap_left {
    top: 50%;
    right: 100%;
    transform: translateY(-50%) translateX(-2rem);

    &::after {
      top: 50%;
      left: 100%;
      transform: translateY(-50%) rotate(90deg);
    }
  }

  .tool-tip-wrap_right {
    top: 50%;
    left: 100%;
    transform: translateY(-50%) translateX(2rem);

    &::after {
      top: 50%;
      left: 0%;
      transform: translateY(-50%) translateX(-100%) rotate(-90deg);
    }
  }

  .tool-tip_mascot {
    .text {
      width: 90%;
    }
  }
}