@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* This file is for your main application CSS */

body {
  @apply bg-base-300 text-[14pt] leading-8 overflow-x-hidden;
}

.post {
  @apply bg-base-200 shadow-md rounded-md mb-4;
  @apply grid grid-cols-[1fr] grid-rows-[min-content_1fr_auto];
  @apply sm:grid-cols-[13em_auto] sm:grid-rows-[1fr_auto];
}
.post :where(article, .userinfo) {
  @apply p-4 pb-0 sm:pb-4;
}

.post .bbc-block {
  @apply bg-base-300 p-4 py-2 border-l-2 border-secondary rounded w-full;
}
.post .bbc-block h4 {
  @apply text-sm mb-2;
}
.post .bbc-spoiler { @apply bg-black text-black; }
.post .bbc-spoiler img { @apply invisible; }
.post .bbc-spoiler:hover { @apply text-inherit bg-inherit; }
.post .bbc-spoiler:hover img { @apply visible; }
.post .sa-smilie { @apply inline; }
.post iframe {
  @apply w-full bg-[brown];
}
.post .code { @apply mockup-code border-l-0; }
.post .code:before { @apply -ml-[2ch]; }
.post .code pre:before { @apply mr-0; }
.post .code h5 { @apply hidden; }
.post a[href] { @apply link; }
.post .editedby { @apply text-sm italic opacity-70 mt-4; }
.post .title :where(img[src*="gangtags"]) + * {
  @apply mb-1;
}

.pagination a svg {
  @apply h-5;
}