.heraldry-cursor-last-point-wrapper {
  transform-origin: center;
  animation: 0.3s lastPointWrapper forwards ease-in;
}

.heraldry-cursor-last-point {
  transform: scale(0);
  transform-origin: center;
  animation: 0.2s lastPoint forwards ease-in;
  background-color: #8d7878 !important;
  border-radius: 50% !important;

  .icon-coat-of-arms {
    > span {
      transform: scale(0.35);
    }
  }

  .ui-button-icon-marker {
    font-size: 14px !important;
    min-width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    border-bottom: 3px solid #4b4b4b;
    border-left: 3px solid #4b4b4b;
    top: -3px !important;
    right: -3px !important;
  }

  &,
  &:hover {
    .ui-button-icon-marker {
      color: white !important;
      background-color: black !important;
    }
  }

  svg {
    color: white;
  }
}

@keyframes lastPointWrapper {
  0% {
    opacity: 0;
    transform:  translate(-50%, -50%) scale(0);
  }

  70% {
    transform: translate(-50%, -50%)  scale(1.3);
  }

  100% {
    opacity: 1;
    transform:  translate(-50%, -50%) scale(1);
  }
}

@keyframes lastPoint {
  0% {
    transform: scale(0);
  }

  70% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.heraldry-cursor-last-point-development {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transform-origin: center;
  transition: 0.3s ease-in-out;
}

.heraldry-cursor-last-point-wrapper:hover {
  .heraldry-cursor-last-point-development {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
