@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap");

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

@font-face {
	font-family: "Zed Mono";
	src: url("/zed-mono/zed-mono-regular.woff2");
  font-weight: 400;
}

@font-face {
	font-family: "Zed Mono";
	src: url("/zed-mono/zed-mono-medium.woff2");
  font-weight: 500;
}

@font-face {
	font-family: "Zed Mono";
	src: url("/zed-mono/zed-mono-bold.woff2");
	font-weight: 700;
}

@font-face {
	font-family: "Zed Mono";
	src: url("/zed-mono/zed-mono-italic.woff2");
	font-style: italic;
}

.material-symbols-rounded {
  font-display: block;
}

:root {
  color-scheme: light dark;
  accent-color: #0E9544;

  font-size: 14px;
  font-family: "Zed Mono", sans-serif;
}

input[type="checkbox"] {
  @apply rounded-md bg-zinc-200 dark:bg-neutral-700 w-5 h-4 focus:ring-zinc-100 dark:focus:ring-neutral-500 focus:ring-1 focus:ring-offset-0;
}

.react-flow__controls-button {
  @apply dark:!bg-neutral-600 dark:!border-b-neutral-700 dark:!text-white dark:hover:!bg-neutral-500;
}

.react-flow__controls-button svg path {
  fill: currentColor;
}

.react-flow__attribution {
  @apply dark:!bg-neutral-700 rounded rounded-b-none;
}

code {
  @apply bg-zinc-200 dark:bg-neutral-600 text-zinc-600 dark:text-neutral-200 font-['IBM_Plex_Mono'] rounded px-1;
}

label {
  display: block
}

.material-symbols-rounded {
  @apply inline-flex items-center align-middle;
}

.cm-editor.cm-focused {
  @apply outline-none;
}

.cm-line {
  @apply font-['IBM_Plex_Mono'];
}
