@import url("https://rsms.me/inter/inter.css");

@font-face {
  font-family: "Eudoxus Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/eudoxus-sans-var.woff2) format("woff2");
}

[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  @apply font-semibold tracking-tight text-gray-300 dark:text-gray-600;
}

.draggable-item {
  display: flex;
  padding: 0.5rem;
  /* margin: 0.5rem 0; */
  @apply bg-white dark:bg-gray-900;
  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); */
}

.draggable-item > .drag-handle {
  flex: 0 0 auto;
  position: relative;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  cursor: grab;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
  @apply dark:invert;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.draggable-item > .content {
  flex: 1 1 auto;
}

.has-focus {
  @apply relative z-50;
  border-radius: 3px;
  box-shadow: 0 0 0 3px #68cef8;
}

/** hacky way to display placeholders */

.is-empty div .content::before {
  content: var(--placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  @apply text-gray-300 dark:text-gray-600;
}

.prose mark {
  @apply bg-yellow-100 dark:bg-yellow-400/20 dark:text-yellow-400 rounded-lg px-1.5 py-0.5;
}

.prose mark > strong {
  @apply dark:text-yellow-400;
}

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

@layer base {
  html,
  body {
    @apply dark:bg-gray-900;
  }

  :not(h1 > *, .font-display) {
    font-feature-settings: "cv11";
  }

  span.ripple {
    position: absolute;
    z-index: 50;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 600ms linear;
    @apply pointer-events-none bg-white/20 dark:bg-white/10;
  }

  @keyframes ripple {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }

  kbd {
    @apply border rounded-md shadow-sm w-6 h-6 inline-flex items-center justify-center dark:border-gray-800;
  }

  :root {
    font-size: 14px;
    line-height: 1.6em;
    @apply antialiased text-gray-900 font-medium;
  }

  .grid-border > * {
    border-left: 1px dashed theme("colors.gray.200");
  }

  .grid-border > *:not(:nth-child(2n)) {
    border-left: none;
  }

  .grid-border > *:not(:nth-child(-n + 2)) {
    border-top: 1px dashed theme("colors.gray.200");
  }

  @media (max-width: 639px) {
    .not-sm-grid-border {
      @apply grid-border;
    }
  }

  @media (max-width: 767px) {
    .feature-grid {
      @apply divide-dashed divide-y;
    }
  }

  @screen md {
    .feature-grid {
      @apply grid-border;
    }
  }
}
