@layer base {
  html {
    font-family: "Ubuntu", system-ui, sans-serif;
  }
}

@layer components {
  body {
    /* @apply font-XXXX; */
    @apply antialiased;
  }

  .text-navigation {
    @apply text-sm text-gray-600;
    /*  dark:text-white; */
  }

  nav a {
    @apply text-gray-600 hover:text-gray-900;
    /*  dark:text-white; */
  }

  a {
    @apply text-blue-500 hover:text-blue-700;
  }

  header,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply mb-2 text-gray-800 select-none first:mt-0 hyphens-none;
  }

  header {
    @apply has-[h1]:mt-12 has-[h2]:mt-9 has-[h3]:mt-7 has-[h4]:mt-5 has-[h5]:mt-4 has-[h6]:mt-4;
    @apply has-[h1]:mb-12 has-[h2]:mb-9 has-[h3]:mb-7 has-[h4]:mb-5 has-[h5]:mb-4 has-[h6]:mb-4;
  }

  #main > p,
  section > p,
  #main > div > p,
  .trix-content > p,
  .trix-content > div {
    @apply my-4 first:mt-0;
  }
  h1 {
    @apply mt-12 text-xl font-bold sm:text-2xl md:text-3xl lg:text-4xl;
  }

  h2 {
    @apply mt-9 mb-4 text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl;
  }

  h3 {
    @apply mt-7 text-base font-semibold sm:text-lg md:text-xl lg:text-2xl;
  }

  h4 {
    @apply mt-5 text-sm font-semibold sm:text-base md:text-lg lg:text-xl;
  }

  h5 {
    @apply mt-3 text-xs font-semibold sm:text-sm md:text-base lg:text-lg;
  }

  h6 {
    @apply mt-2 text-xs font-semibold sm:text-sm md:text-base;
  }
  .material-icons {
    @apply text-lg;
  }

  action-text-attachment,
  .attachment__caption {
    @apply flex justify-center;
  }

  @layer components {
    .badge-base {
      @apply px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 ease-in-out hover:scale-105 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cta-500;
    }

    .badge-active {
      @apply text-white bg-cta-600 hover:bg-cta-700 hover:text-white;
    }

    .badge-inactive {
      @apply text-gray-700 bg-gray-100 hover:bg-gray-200 hover:text-gray-700;
    }
  }
}

.trix-content blockquote {
  @apply p-4 pl-4 my-6 italic text-gray-600 rounded border-l-4 sm:w-2/3 border-default-primary;
}

.trix-content ul li {
  @apply relative pl-6 my-2 before:absolute before:left-0 before:top-1.5 before:w-4 before:h-4 before:bg-[url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22m8.25%204.5%207.5%207.5-7.5%207.5%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")] before:bg-contain before:bg-center before:bg-no-repeat before:text-gray-500;
}

[data-controller="reading-progress"] {
  transform-origin: 0 50%;
}