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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@layer utilities {
  .sidebar-open {
    @apply md:ml-64;
  }

  .h-native-viewport {
    height: var(--viewport-height, 100vh);
    min-height: var(--viewport-height, 100vh);
  }
}

@layer components {
  .primary-input {
    @apply block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full;
  }

  .primary-button {
    @apply block shadow rounded-md border border-blue-500 px-4 py-2 text-white font-medium bg-blue-500 hover:bg-blue-600 hover:border-blue-600 cursor-pointer;
  }
}

code {
  @apply bg-gray-100 rounded font-semibold;
}

span.line-numbers {
  @apply mr-4;
}

div.CodeRay {
  @apply mb-2;
}

@keyframes line-item-highlight {
  0% {
    background: rgb(243 244 246 / 0.7);
  }

  100% {
    background: none;
  }
}

.line-item-highlight {
  animation: line-item-highlight 5s;
}