@layer utilities {
  /* A set of reusable classes */

  .bg-editor {
    background-color: #282c34;
  }

  body[data-editor-theme="highContrast"] .bg-editor {
    background-color: #060708;
  }

  .text-editor {
    color: #c4cad6;
  }

  .font-editor {
    font-family: "JetBrains Mono", "Droid Sans Mono", "monospace";
    font-variant-ligatures: none;
    font-size: 14px;
  }

  .shadow-xl-center {
    box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.1),
      0 0 10px -5px rgba(0, 0, 0, 0.04);
  }

  .shadow-custom-1 {
    box-shadow: 10px 5px 25px -8px rgba(0, 0, 0, 0.2);
  }

  .flip-horizontally {
    transform: scaleY(-1);
  }

  /* Animations */

  .fade-in {
    animation: fade-in-frames 200ms ease-out;
  }

  .fade-out {
    animation: fade-out-frames 200ms ease-in;
  }

  @keyframes fade-in-frames {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out-frames {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  .delay-200 {
    animation: delay-frames 200ms;
  }

  @keyframes delay-frames {
    0% {
      opacity: 0;
      height: 0;
      width: 0;
    }
    99% {
      opacity: 0;
      height: 0;
      width: 0;
    }
    100% {
    }
  }
}