/*
 * WARNING: This CSS file is for DEMO PURPOSES ONLY
 *
 * This stylesheet is part of a demo component used in Storybook.
 * For production applications, use the Scripture Editor component from:
 * - @eten-tech-foundation/platform-editor
 *
 * Copied from paranext-core/extensions/src/platform-scripture-editor/src/platform-scripture-editor.web-view.scss
 */

@import "./usj-nodes.css";
/* @import './commenting.css'; */
@import "./editor.css";
@import "./nodes-menu.css";
/* @import './tailwind.css'; */
@import "./editor-overrides.css";

body {
  background-color: hsl(var(--background));
  /*  remove margins added by the electron browser user-agent style sheet */
  margin: 0;
}

/*  #region verse number highlight */

/*  Highlight keyframes thanks to chazsolo at https://stackoverflow.com/a/55835473 */
@keyframes highlight {
  from {
    background-color: yellow;
  }
}

.editor-container .highlighted {
  position: relative;
}

.editor-container .highlighted::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  animation: highlight 2s;
}

/*  #endregion */
