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

:root {
  --fgColor-onEmphasis: #ffffff;
  --focus-outlineColor: theme("colors.blue.700");
  --layout-sidebar-width: 220px;
  --layout-gutter: 16px;
}

@layer base {
  mark {
    @apply bg-tertiary;
  }
}

@layer components {
  .turbo-progress-bar {
    @apply bg-primary rounded-r-full;
  }

  /* Rails error form styling */
  .field_with_errors label {
    @apply text-error-700;
  }
  .field_with_errors > :is(input, textarea, select) {
    @apply border-error-700;
  }
  /* End Rails error form styling */

  /* Quill editor */
  .ql-editor {
    @apply flex-grow;
  }

  .ql-content p {
    @apply mb-4;
  }

  .ql-content h3 {
    @apply text-lg font-bold leading-6 md:leading-none;
    @apply mb-4;
  }

  .ql-content h4 {
    @apply text-lg font-bold leading-6 md:leading-none;
    @apply mb-4;
  }

  .ql-content ol {
    @apply list-decimal ps-4;
  }

  .ql-content ul {
    @apply list-disc ps-4;
  }
  .ql-content ul li,
  .ql-content ol li {
    @apply pb-2;
  }

  /* Imported blog content */
  /* Preferably mutate this on import */
  .blog-content {
    @apply text-base font-normal leading-normal;
  }

  .blog-content p {
    @apply my-4;
  }

  .blog-content h2 {
    @apply text-lg sm:text-2xl leading-tight font-bold tracking-tight;
    @apply my-6;
  }

  .blog-content h3 {
    @apply text-lg sm:text-2xl leading-tight font-bold tracking-tight;
    @apply my-6;
  }

  .blog-content h4 {
    @apply text-base sm:text-xl leading-tight font-normal tracking-tighter;
    @apply my-6;
  }

  .blog-content h5 {
    @apply text-base leading-tight font-bold tracking-tight;
  }

  .blog-content ol {
    @apply list-decimal ps-4;
  }

  .blog-content ul {
    @apply list-disc ps-4;
  }

  .blog-content iframe {
    @apply absolute top-0 left-0 bottom-0 right-0 w-full h-full;
  }

  .blog-content blockquote {
    @apply border-0 mt-4 px-8 md:px-20 py-4 md:py-8;

    p {
      @apply font-medium;
    }
  }
}