.excalidraw {
  .CursorHint {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--zIndex-cursorHint);
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;

    // dark-theme island colors, in both themes (keeps the hint high-contrast
    // over the mostly-light canvas)
    background-color: #232329;
    color: #e3e3e8;
    box-shadow: var(--shadow-island);
    border-radius: var(--border-radius-md);

    animation: CursorHint-fade-in 100ms ease-out;
    // fade-out duration (keep in sync with CursorHint.tsx)
    transition: opacity 100ms ease-out;

    &--fade-out {
      opacity: 0;
    }

    svg {
      width: 1rem;
      height: 1rem;
    }
  }

  @keyframes CursorHint-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}