/*
 * 円形・ハート型切り取りと同じく、見た目の丸より広い透明な操作領域を確保する。
 */
.bk-mask-handle {
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.bk-mask-handle::after {
  position: absolute;
  inset: 15px;
  box-sizing: border-box;
  border: 2px solid #1689c5;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  content: "";
}

.bk-mask-handle:focus-visible {
  outline: 0;
}

.bk-mask-handle:focus-visible::after {
  box-shadow: 0 0 0 3px rgba(22, 137, 197, .32);
}

@media (max-width: 767px) {
  .bk-mask-handle {
    width: 56px;
    height: 56px;
    margin: 0;
  }

  .bk-mask-handle::after {
    inset: 19px;
  }
}