/* spec 28.5. */
input {
  caret-color: transparent;
}

/* spec 28.1., 28.2., 28.3., 28.4., 15.6.3. */
.caret {
  width: 2px;
  height: 1em;
  border-radius: 1px;
  background: black;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.15);
}

/* spec 28.6. */
.caret.visible {
  opacity: 1;
}

/* spec 28.7. */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.caret.blink {
  animation: blink 1s var(--transition-easing) infinite;
}

/* spec 28.6. */
#caret {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* spec 28.6. */
.caret.floating {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}