:host {
  --size: 10px;
  --x-position: 0;
  --y-position: 0;

  background: black;
  border-radius: 50%;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: var(--size);
  position: absolute;
  transition: opacity 0.25s;
  width: var(--size);
  z-index: 2;
  transform: translate(var(--x-position), var(--y-position));
}

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