@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.dialog-overlay[data-state='closed'],
.dialog-content[data-state='closed'] {
  animation: fadeOut 150ms ease-in;
}

.card-bg-gradient {
  background: linear-gradient(
    var(--bg-direction),
    hsl(240deg 71% 69%) 16%,
    hsl(225deg 85% 66%) 48%,
    hsl(214deg 93% 62%) 61%,
    hsl(204deg 98% 53%) 69%,
    hsl(200deg 100% 50%) 76%,
    hsl(198deg 100% 50%) 81%,
    hsl(195deg 100% 49%) 86%,
    hsl(193deg 100% 48%) 91%,
    hsl(190deg 100% 48%) 95%,
    hsl(188deg 86% 53%) 100%
  );
}

.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 250ms ease-in;
}

/* https://stackoverflow.com/a/16681137 */
.transition-safari-fix {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}