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

@layer base {
  html {
    font-family: "Source Serif 4", "Shippori Mincho B1", serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  .link {
    @apply text-outer-space-800 hover:text-outer-space-500;
  }

  .link-underline {
    @apply underline hover:no-underline;
  }
}

html {
  &.env-development {
    .translation_missing {
      @apply bg-red-400;
    }
  }
}

[x-cloak] {
  @apply !hidden;
}

.prose-render {
  @apply prose prose-gray prose-base w-full !max-w-none;
  @apply prose-h1:font-normal prose-h1:text-barley-corn-600 prose-h1:my-12;
  @apply prose-h2:font-normal prose-h2:text-barley-corn-600 prose-h2:my-12;
  @apply prose-h3:font-semibold prose-h3:my-12;
  @apply prose-p:my-3;
  @apply prose-img:mx-auto;

  h1 + h3,
  h2 + h3,
  h3 + h3 {
    @apply -mt-10;
  }

  h1 + p,
  h2 + p,
  h3 + p {
    @apply -mt-6;
  }

  /* Tiptap weirdness */
  li > p {
    @apply my-0;
  }

  /* Column */
  [data-type="columns"] {
    @apply md:grid md:gap-8 md:my-8;
    @apply [&.layout-two-column]:lg:grid-cols-[1fr_1fr];
  }

  [data-type="column"] {
    @apply [&>*:first-child]:lg:mt-0;
  }
}

.ProseMirror {
  [data-type="column"] {
    @apply rounded border border-dotted border-gray-300 p-1;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */