.typstmate-snippets {
  position: fixed;
  left: var(--preview-left, 0);
  top: var(--preview-top, 0);
  z-index: 200;
  background: var(--background-secondary);
  padding: 2px 3px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
  user-select: none;
  transition: opacity 0.13s;
  opacity: 0.97;
  border: 1px solid var(--background-modifier-border);

  display: flex;
  flex-direction: column;
  max-height: 600px;
  overflow-y: auto;
  box-sizing: border-box;
}

.typstmate-snippets .item {
  cursor: pointer;
  padding: 4px 6px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.typstmate-snippets .item.selected {
  background-color: var(--nav-item-background-selected);
}

span.typstmate-atmode .cm-math {
  background: linear-gradient(
    66.6deg,
    #ff9fb3 0%,
    #ffd29a 18%,
    #fff48b 36%,
    #bff0a8 54%,
    #9dd7ff 72%,
    #d3b7ff 90%,
    #ff9fb3 100%
  );
  animation: typstmate-rainbow 1s linear infinite;
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
}

@keyframes typstmate-rainbow {
  0% {
    background-position: 100% center;
  }
  100% {
    background-position: -100% center;
  }
}
