.articleDetail {
}
.article {
  @apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;

  :global(.dark) & {
    @apply bg-gray-800;
  }
  & > header {
    @apply my-8 mx-4;
    h1 {
      @apply text-2xl font-medium;

      :global(.dark) & {
        @apply text-gray-200;
      }
    }
    time {
      @apply text-sm text-gray-500;
      :global(.dark) & {
        @apply text-gray-400;
      }
    }
  }
  & > div {
    @apply my-4 leading-8 mx-4 lg:mx-6 xl:mx-8 text-justify;

    h1,
    h2,
    h3,
    h4 {
      @apply text-red-400;

      :global(.dark) & {
        @apply text-white;
      }
    }

    h1 {
      @apply hidden;
    }

    h2 {
      @apply text-2xl mt-8 mb-4 font-semibold border-b border-red-500 leading-10;

      :global(.dark) & {
        @apply border-green-700;
      }
    }

    h3 {
      @apply text-xl mt-6 mb-2 font-light;
    }

    h4 {
      @apply mt-4 font-medium;
    }

    p {
      @apply my-4;
    }

    ul {
      @apply pl-4;

      li {
        @apply list-disc;
      }
    }
    ol {
      @apply pl-4;

      li {
        @apply list-decimal;
      }
    }

    code,
    pre {
      @apply font-mono rounded;
    }

    code {
      @apply p-1 text-red-500 bg-red-100;
      :global(.dark) & {
        @apply bg-green-800 bg-opacity-20 text-green-400;
      }
    }

    pre {
      @apply px-2 py-1 bg-yellow-900 bg-opacity-5 overflow-x-auto;
      :global(.dark) & {
        @apply bg-green-800 bg-opacity-20;
      }
      code {
        @apply text-current bg-transparent;

        :global(.dark) & {
          @apply text-current bg-transparent;
        }
      }
    }
  }
}

.articleEnd {
  @apply text-center text-gray-400 text-sm my-6;

  &:before, &:after {
    content: '※';
    @apply mx-4 text-xs align-text-top;
  }
}