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

@layer components {
  .refresh-indicator {
    transition: width 0.2s ease, opacity 0.3s ease;
  }
  
  .command-mode {
    @apply ring-2 ring-green-400 ring-opacity-50;
  }
  
  .command-mode .prompt {
    @apply border-green-400;
  }
}

.markdown {
  /* .note 自体に適用するスタイル */
  @apply text-stone-600 p-4 bg-zinc-50 ;
  
  /* .note 配下の要素に適用するスタイル */
  h1, h2, h3, h4, h5, h6 {
  @apply font-bold text-stone-700;
  }
  
  h1 {
  @apply mb-6 mt-12 text-lg border-b border-stone-300;
  }
  
  #title {
  @apply my-6 text-xl border-none !important;
  }
  
  h2, h3, h4, h5, h6 {
  @apply my-6 text-base;
  }
  
  h2 {
  @apply border-l-8 pl-4 ;
  }
  
  hr {
  @apply my-3;
  }
  
  p {
  @apply my-3 leading-relaxed;
  }
  
  a {
  @apply text-indigo-500;
  }
  
  pre {
  @apply p-4 my-4 overflow-x-auto;
  }
  
  p > code, td > code {
  @apply px-1 bg-stone-200 rounded-md;
  }
  
  blockquote {
  @apply px-6 py-2 my-2 bg-stone-100 border-l-8 border-stone-200;
  }
  
  strong {
  @apply text-rose-500;
  }
  
  em {
  @apply italic;
  
  }
  
  ul {
  @apply list-disc list-inside pl-6;
  }
  
  ol {
  @apply list-decimal list-inside pl-6;
  }
  
  table {
  @apply min-w-full border-collapse border border-stone-300 text-sm mb-4 overflow-hidden;
  }
  
  thead {
  @apply bg-stone-100 border border-stone-300 ;
  }
  tbody {
  @apply divide-y divide-stone-300 bg-white border border-stone-300 ;
  }
  td {
  @apply px-3;
  }
  th, td {
  @apply border border-stone-300;
  }
  
  .footnotes > li {
  @apply text-sm;
  }
  
  .footnotes > ol > li > p {
  @apply text-sm inline;
  }
  
  li > code {
  @apply rounded-md bg-stone-200 px-1;
  }
  
  img {
  @apply m-6 drop-shadow-md w-5/6 border border-stone-300 ;
  }
}