styles.css

/* Default abcjs styles look good. Just adapting it to the current theme.  */

.abcjs-container svg path {
  fill: var(--text-normal);
}

.abcjs-container svg text {
  fill: var(--text-normal);
}

.abcjs-brace {
  stroke: var(--text-normal);
}

.obsidian-plugin-abcjs-error {
  background-color: #E74C3C;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px;
  text-align: center
}

/* ------------------------------------------------- Audio Playback styles */
.abcjs-container {
  cursor: pointer;
}

/* color the current notes */
.abcjs-highlight path {
  fill: var(--background-modifier-success) !important;
}

/* Highlight the region when audio is playing */
.cm-embed-block.is-playing,
.cm-embed-block.is-playing:focus-within {
  box-shadow: 0 0 0 1px var(--background-modifier-success), inset 0 0 0 1px var(--background-modifier-success) !important;
  border-radius: var(--radius-s);
}
/* .cm-embed-block:focus-within {
  box-shadow: 0 0 0 1px var(--color-blue), inset 0 0 0 1px var(--color-blue) !important;
  border-radius: var(--radius-s);
} */

.abcjs-css-warning {
  display: none;
}