@use '../foundation/typography';
@use '../foundation/colors';

$width: 2px !default;

.ryuseicode {
  &__carets {
  }

  &__caret {
    animation: ryuseicode-blink step-end 1.1s infinite;
    border-left: $width solid colors.$caret;
    box-sizing: border-box;
    display: none;
    height: typography.$line-height + em;
    pointer-events: none;
    position: absolute;
    width: 0;
    z-index: 2;

    &.is-active {
      display: block;
    }
  }
}

@keyframes ryuseicode-blink {
  50% {
    opacity: 0;
  }
}