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

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer components {
  /* layout */

  .bk-card-1 {
    @apply rounded-lg lg:rounded-xl bg-white shadow-xl;
  }

  .bk-card-2 {
    @apply rounded bg-white shadow-md border border-gray-100;
  }

  .bk-shadow-line {
    @apply h-2 bg-gradient-to-b from-transparent to-black opacity-[0.03];
  }

  /* text */

  .bk-header-1 {
    @apply font-display text-3xl text-balance;    
  }
  .bk-header-2 {
    @apply font-display text-2xl text-balance;
  }
  .bk-header-3 {
    @apply font-display text-xl font-semibold text-balance;
  }
  .bk-header-4 {
    @apply font-display text-lg font-semibold text-balance;
  }

  .bk-kicker-1 {
    @apply font-display text-lg font-normal text-gray-500 uppercase tracking-widest;
  }

  .bk-text-1 {
    @apply font-sans text-base;
  }
  .bk-text-2 {
    @apply font-sans text-base text-gray-500;
  }
  .bk-text-3 {
    @apply font-sans text-sm text-gray-500;
  }
  .bk-text-4 {
    @apply font-sans text-xs text-gray-400;
  }

  .bk-dot-separator {
    @apply inline before:content-['•'] mx-1;
  }

  .bk-link-1 {
    @apply text-red-600 underline;
  }
  .bk-link-2 {
    @apply text-[inherit] underline hover:text-black;
  }
  .bk-link-3 {
    @apply text-[inherit] hover:underline hover:text-black;
  }

  /* lists */

  .bk-list {
    @apply pl-4 list-disc;
  }
  .bk-list>li {
    @apply py-1 pl-2;
  }
  .bk-list--numbered {
    @apply list-decimal marker:font-bold marker:text-sm;
  }

  /* buttons */

  .bk-button-0 {
    @apply bg-red-600 text-white leading-4 hover:bg-red-700 focus:ring-red-600/50 dark:bg-red-400 dark:text-red-900 dark:hover:bg-red-400/90 dark:focus:ring-red-400/50 inline-flex items-center justify-center space-x-1 rounded-full border border-transparent px-4 py-2 h-[50px] text-base font-display shadow-sm focus:outline-none focus:ring cursor-pointer disabled:bg-gray-400 disabled:text-gray-200 dark:disabled:bg-gray-500 dark:disabled:text-gray-700 whitespace-nowrap;
  }
  .bk-button-0 svg {
    @apply h-[1em];
  }


  .bk-button-1 {
    @apply bg-red-600 text-white leading-4 hover:bg-red-700 focus:ring-red-600/50 dark:bg-red-400 dark:text-red-900 dark:hover:bg-red-400/90 dark:focus:ring-red-400/50 inline-flex items-center justify-center space-x-1 rounded-full border border-transparent px-2 py-1 h-[38px] text-base font-display shadow-sm focus:outline-none focus:ring cursor-pointer disabled:bg-gray-400 disabled:text-gray-200 dark:disabled:bg-gray-500 dark:disabled:text-gray-700 whitespace-nowrap;
  }
  .bk-button-1 svg {
    @apply h-[1em];
  }

  .bk-button-2 {
    @apply bg-gray-300 text-gray-900 leading-4 hover:bg-gray-400 active:text-black focus-visible:ring-red-600/50 dark:bg-gray-400 dark:text-gray-900 dark:hover:bg-gray-400/90 dark:focus-visible:ring-red-400/50 inline-flex items-center justify-center space-x-1 rounded-full border border-transparent px-2 py-1 h-[38px] text-base font-display shadow-sm focus-visible:outline-none focus-visible:ring cursor-pointer disabled:bg-gray-200 disabled:text-gray-300 dark:disabled:bg-gray-500 dark:disabled:text-gray-700 whitespace-nowrap;
  }
  .bk-button-2 svg {
    @apply h-[1em];
  }

  .bk-icon-button {
    @apply relative text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus-visible:ring-red-400/50 dark:hover:bg-gray-900/10 dark:hover:text-gray-300 dark:focus-visible:ring-red-400/50 inline-flex items-center justify-center rounded-full border border-transparent p-1 w-6 h-6 text-sm font-medium focus-visible:outline-none focus-visible:ring cursor-pointer disabled:opacity-30 disabled:hover:text-gray-400 disabled:hover:bg-transparent dark:disabled:hover:text-gray-700;
  }
  .bk-icon-button svg {
    @apply h-[1em];
  }
  .bk-icon-button--filled {
    @apply bg-red-600 text-white hover:bg-red-700 hover:text-white disabled:bg-gray-400 disabled:text-gray-200 disabled:hover:text-gray-200 focus:ring-red-600/50 focus:outline-none focus:ring;
  }
  .bk-icon-button--filled svg {
    @apply h-[1.5em];
  }

  /* images */

  .bk-cover {
    @apply rounded border object-cover;
  }
  .bk-cover--audiobook {
    @apply aspect-square;
  }

  .bk-thumbnail {
    @apply rounded border object-cover aspect-square;
  }

  /* audio player */
  
  .bk-audio[data-playing]::-webkit-media-controls-panel {
    @apply bg-red-100;
  }

  /* components */

  .sortable-ghost {
    @apply ring-gray-200 ring-1 rounded-full;
  }
  .sortable-ghost > * {
    @apply invisible;
  }

  .bk-drop-area {
    @apply border-2 border-red-600 border-dashed rounded-lg;
  }

  /* formatted text */

  .bk-formatted-text hgroup {
    @apply py-6 text-center;
  }
  .bk-formatted-text h1 {
    @apply bk-header-1 py-4;
  }
  .bk-formatted-text hgroup h1 {
    @apply py-1;
  }
  .bk-formatted-text h2 {
    @apply bk-header-2 py-4;
  }
  .bk-formatted-text hgroup h2 {
    @apply py-1;
  }
  .bk-formatted-text hgroup footer {
    @apply py-1 bk-text-3;
  }
  .bk-formatted-text h3 {
    @apply bk-header-3 py-4;
  }
  .bk-formatted-text h4 {
    @apply bk-header-4 py-4;
  }
  .bk-formatted-text p {
    @apply py-1;
  }
  .bk-formatted-text strong {
    @apply text-black;
  }
  .bk-formatted-text a {
    @apply bk-link-2;
  }
  .bk-formatted-text ul {
    @apply bk-list;
  }
  .bk-formatted-text ol {
    @apply bk-list bk-list--numbered;
  }
}
/*
 * 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.
 *


 */