:host {
  display: grid;
  position: absolute;
  box-sizing: border-box;
  border: none;
  width: 100%;
  height: 100%;

  --size: 10px;
  --x-position: 0;
  --y-position: 0;
}

.pointer {
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: black;
  border-radius: 50%;
  z-index: 2;
  cursor: pointer;
  transform: translate(var(--x-position), var(--y-position)) scale(0);
  -webkit-animation: 0.25s linear fadein;
          animation: 0.25s linear fadein;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.pointer::after {
  content: "";
  cursor: pointer;
  border: 5px solid black;
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  display: block;
  transform: translate(calc(-50% + var(--size) * 0.5), calc(-50% + var(--size) * 0.5));
  padding: calc(var(--size) * 0.5);
  opacity: .75;
}

@-webkit-keyframes fadein {
  from {
    transform: translate(var(--x-position), var(--y-position)) scale(0);
  }

  to {
    transform: translate(var(--x-position), var(--y-position)) scale(1);
  }
}

@keyframes fadein {
  from {
    transform: translate(var(--x-position), var(--y-position)) scale(0);
  }

  to {
    transform: translate(var(--x-position), var(--y-position)) scale(1);
  }
}