.bg-ai {
  background: linear-gradient(
    135deg,
    var(--glow-stop-1) 0,
    var(--glow-stop-2) 25%,
    var(--glow-stop-3) 50%,
    var(--glow-stop-4) 75%,
    var(--glow-stop-5) 100%
  );
}

.bg-ai.--border-only {
  border-radius: 0.45rem;
}

.bg-ai.--border-only * {
  z-index: 9;
}

.bg-ai.--border-only::after {
  content: attr(text);
  position: absolute;
  inset: 1px;
  background: var(--color-base-100);
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-ai.--border-only::before {
  content: attr(text);
  position: absolute;
  inset: 1px;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow-bg::before {
  content: '';
  position: absolute;
  inset: -5px;
  transform: translate(0);
  z-index: -1;
  opacity: 0.5;
  background: linear-gradient(
    135deg,
    var(--glow-stop-1) 0,
    var(--glow-stop-2) 25%,
    var(--glow-stop-3) 50%,
    var(--glow-stop-4) 75%,
    var(--glow-stop-5) 100%
  );
  border-radius: 8px;
  animation: glow-enter-blur 0.5s ease 0.3s;
  animation-fill-mode: both;
}

.glow-bg::after {
  content: '';
  position: absolute;
  inset: -1px;
  transform: translate(0);
  z-index: -1;
  opacity: 0.5;
  background: linear-gradient(
    135deg,
    transparent 0,
    transparent 34%,
    transparent 49%,
    #fff 57%,
    #fff 64%,
    var(--glow-stop-1) 66%,
    var(--glow-stop-2) 75%,
    var(--glow-stop-3) 83%,
    var(--glow-stop-4) 92%,
    var(--glow-stop-5) 100%
  );
  background-size: 300% 300%;
  background-position: 0 0;
  background-repeat: no-repeat;
  transition: background-position 0.4s ease;
  border-radius: 9px;
  animation: glow-enter-stroke 0.3s ease 0.3s;
  animation-fill-mode: both;
}

.ngneat-dialog-content {
  overflow: unset !important;
  background: var(--color-base-100) !important;
  animation: unset !important;
}

.ngneat-dialog-content::before {
  content: '';
  position: absolute;
  inset: -5px;
  transform: translate(0);
  z-index: -1;
  opacity: 0.5;
  background: linear-gradient(
    135deg,
    var(--glow-stop-1) 0,
    var(--glow-stop-2) 25%,
    var(--glow-stop-3) 50%,
    var(--glow-stop-4) 75%,
    var(--glow-stop-5) 100%
  );
  border-radius: 8px;
  opacity: 0.5;
  filter: blur(60px);
  /* animation: glow-enter-blur 0.5s ease 0.3s; */
  /* animation-fill-mode: both; */
}

@keyframes glow-enter-blur {
  0% {
    opacity: 0;
    filter: blur(1px);
  }

  25% {
    opacity: 0.7;
    filter: blur(30px);
  }
  100% {
    opacity: 0.5;
    filter: blur(60px);
  }
}

@keyframes glow-enter-stroke {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}