@tailwind base;
@tailwind components;
@tailwind utilities;

pre {
  overflow-x: auto;
  padding: 1rem 0;
}

pre.shiki {
  border-radius: 8px;
  padding-right: 14px;
  padding-left: 14px;
}

@keyframes preloadAnimation {
  from {
    background-position: 100% 0
  }

  to {
    background-position: -80% 0
  }
}

.shimmer {
  background: linear-gradient(to right, white 8%, #e5e5e5 18%, white 33%);
  background-size: 200% 50px;
  animation: preloadAnimation 2s infinite;
  border-collapse: collapse;
  border-radius: 8px;
  width: 100%
}

.unstyled-shimmer {
  background: linear-gradient(to right, transparent 8%, #e5e5e5 18%, transparent 33%);
  background-size: 200% 50px;
  animation: preloadAnimation 2s infinite;
  border-collapse: collapse;
  width: 100%
}

.debug {
  outline: 1px solid red;
}

.jsoneditor.jsoneditor-mode-view {
  @apply border-none text-zinc-900;

  .jsoneditor-field {
    color: #E45649;
    @apply sm:min-w-max
  }

  div.jsoneditor-value.jsoneditor-null {
    color: #0184BC;
  }

  div.jsoneditor-value.jsoneditor-string {
    color: #50A14F;
  }

  div.jsoneditor-value.jsoneditor-number {
    color: #986801;
  }

  div.jsoneditor-value.jsoneditor-object {
    @apply text-zinc-600;
  }
}

.jsoneditor.jsoneditor-mode-code {
  @apply border-neutral-300;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
