@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
    [data-theme="dark"] & {
      border-color: var(--color-gray-700, currentColor);
    }
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--color-gray-400);
    [data-theme="dark"] & {
      color: var(--color-gray-500);
    }
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
  dialog {
    margin: auto;
  }
  h1 {
    @apply text-5xl mb-3;
  }

  h2 {
    @apply text-4xl mb-3;
  }

  h3 {
    @apply text-3xl mb-3;
  }

  h4 {
    @apply text-2xl mb-3;
  }

  h5 {
    @apply text-xl mb-3;
  }

  h6 {
    @apply text-lg mb-3;
  }

  p {
    @apply mb-2;
  }

  .text-muted {
    @apply text-gray-500 dark:text-gray-400;
  }

  button {
    @apply cursor-pointer appearance-none;
  }

  .link {
    @apply font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline transition-colors;
  }

  small {
    @apply text-sm text-gray-500;
  }

  .link {
    @apply text-blue-600 hover:text-blue-800 underline hover:no-underline transition-colors;
  }

  ul {
    @apply list-disc ps-6 mb-4;
  }

  ol {
    @apply list-decimal ps-6 mb-4;
  }

  blockquote {
    @apply border-l-4 border-gray-300 ps-4 italic text-gray-600 mb-4;
  }

  .code-inline {
    @apply bg-gray-100 px-2 py-1 rounded font-mono text-sm;
  }

  .code-block {
    @apply bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto;
  }
  pre {
    overflow: auto;
    font-size: 13px !important;
    font-family: var(--font-mono) !important;
    margin: 0 !important;
    padding: 0.7em !important;
    color: #f8f8f2;
    text-shadow: 0 1px #0000004d;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    hyphens: none;
    line-height: 1.5;
    background-color: #333;
  }
}