:host {
	--recognition-background-colour: #b2f2bb;
	--clr-2: #073438;
	--clr-3: #0e4b50;
	--clr-4: #2d8f85;
	--clr-5: #637c54;
}

:host {
  background-color: transparent;
}

#insight-container {
  position: absolute;
  bottom: 3dvh;
  left: 50%;
  transform: translateX(-50%);
  background-color: inherit;
  cursor: pointer;
  user-select: none;
}

#insight-content {
  padding: 10px 20px;
  max-height: 75dvh;
  min-width: 50dvw;
  color: var(--card-fg, var(--surface-fg, #404040));
  font-size: 0.75rem;
  text-align: center;
  background-color: var(--card-bg, var(--surface-bg, transparent));
  border-radius: 24px;
}

#insight-content::before,
#insight-content::after {
  content: "";
  position: absolute;
  inset: -0.1rem;
  z-index: -1;
  background: #404040;
  border-radius: inherit;
  animation: rotation 5s linear infinite;
}

#insight-content.loading::before,
#insight-content.loading::after {
  background: conic-gradient(from var(--gradient-angle), red, orange, yellow, lime, green, aqua, cyan, blue, indigo, violet, magenta, pink, red);
}

.loading::after {
  -webkit-backdrop-filter: blur(1.5rem);
  filter: blur(1.5rem);
}

#insight-content:active {
  background-color: #404040;
  color: #ffffff;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color 0.5s ease, color 0.3s ease;
}

@keyframes rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}