@import 'main.tailwind.css';
@import 'article.tailwind.css';

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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@layer components {
  .articles-preview {
    /* @apply flex sm:flex-row sm:space-x-6 sm:space-y-0 sm:px-0 flex-col space-x-0 space-y-6 px-6 justify-between text-center; */
    /* grid-cols-3 gap-4 justify-between text-center */
    @apply grid grid-cols-1 gap-8 mx-auto md:gap-x-6 max-w-sm md:max-w-none md:grid-cols-3 justify-between text-center;
  }
  
  .articles-preview a {
    /* @apply block border sm:w-1/3 mx-auto w-full p-2 rounded-lg border-gray-300 shadow text-gray-700 bg-gray-500/[0.05] hover:underline hover:text-sky-700 hover:bg-sky-700/[0.1] hover:border-sky-700; */
    
    @apply block border w-full p-2 rounded-lg border-gray-300 shadow text-gray-700 bg-gray-500/[0.05] hover:underline hover:text-sky-700 hover:bg-sky-700/[0.1] hover:border-sky-700;
  }
  
  .articles-preview h3 {
    @apply text-lg mb-1;
  }
}

@layer components {
  .article-category {
    @apply space-y-4;
  }
  .article-category h2 {
    @apply text-2xl text-sky-700;
  }
  .article-category ul {
    @apply list-disc text-lg space-y-2 text-sky-700;
  }
  .article-category ul a {
    @apply hover:text-sky-700 underline;
  }
}

@layer components {
  article .definition, article .example, article .tip {
    @apply  p-4 border border-dashed rounded-lg;
  }
  article .definition h4, article .example h4, article .tip h4 {
    @apply text-lg  mb-2;
  }
  
  article .definition {
    @apply border-sky-700 bg-sky-700/[0.05];
  }
  article .definition h4, article .definition .link {
    @apply  !text-sky-700;
  }
  
  article .example {
    @apply border-green-700 bg-green-700/[0.05];
  }
  article .example h4, article .example .link  {
    @apply !text-green-700;
  }
  
  article .tip {
    @apply border-yellow-700 bg-yellow-700/[0.05];
  }
  article .tip h4, article .tip .link {
    @apply !text-yellow-700;
  }
}
@layer components {
  .msd-simulation {
    @apply space-y-6;
  }
  .msd-simulation .schematic {
    @apply relative mx-auto max-w-[330px];
  }
  .msd-simulation .schematic img {
    @apply w-full h-auto;
  }
  .msd-simulation .value {
    @apply absolute w-[123px] h-[25px] px-2 py-0.5 truncate text-center font-code text-xs text-gray-700 bg-white border border-gray-500 rounded;
  }
  .msd-simulation .value.k {
    @apply left-[11%] top-[29%];
  }
  .msd-simulation .value.d {
    @apply left-[11%] bottom-[33%];
  }
  .msd-simulation .value.m {
    @apply right-[7%] top-[42%];
  }
  .msd-simulation .fields {
    @apply flex flex-wrap justify-center gap-x-6 gap-y-4;
  }
  .msd-simulation .fields label {
    @apply flex items-center gap-2;
  }
  .msd-simulation .fields input {
    @apply w-28 h-8 px-2 font-code text-base text-gray-700 bg-gray-50 border border-gray-500 rounded-lg;
  }
  .msd-simulation .canvases {
    @apply relative mx-auto max-w-[600px];
  }
  .msd-simulation canvas {
    @apply block w-full bg-gray-50 border border-gray-500;
  }
  .msd-simulation canvas + canvas {
    @apply absolute inset-0 bg-transparent border-transparent;
  }
}
@layer components {
  p {
    @apply font-serif text-xl;
  }
  p .link {
    @apply underline italic text-sky-700;
  }
  main {
    @apply p-4 mx-auto max-w-screen-md space-y-6 px-6 sm:px-4;
  }
  .MathJax {
    @apply !text-xl;
  }

  .code-block {
    @apply relative;
  }
  .label {
    @apply absolute top-2 end-2 text-slate-300 text-xs;
  }

  pre code {
    @apply font-code text-sm rounded-lg overflow-hidden;
  }
  
  article {
    @apply space-y-6;
  }
  article .date {
    @apply text-sm text-gray-400 text-center;
  }
  article h2 {
    @apply text-3xl font-semibold text-center;
  }
  article h3 {
    @apply text-2xl text-sky-700;
  }
  article > h4 {
    @apply text-xl text-red-800;
  }

  article ul {
    @apply list-disc list-outside space-y-2 pl-4;
  }

  article figure img {
    @apply mx-auto max-w-full h-auto;
  }
  article figcaption {
    @apply font-serif text-base text-center mt-2;
  }

  article table {
    @apply mx-auto font-serif text-lg border-collapse;
  }
  article th, article td {
    @apply border border-gray-300 px-3 py-1 text-center;
  }
  article caption {
    @apply caption-bottom text-base mt-2;
  }
  
  .path-nav {
    @apply pl-5 max-w-screen-xl mx-auto;
  }
  
  .path-nav > span, .path-nav > a {
    @apply text-base text-gray-500 px-1;
  }
  
  .path-nav > a:first-child {
    @apply hover:no-underline;
  }
  
  .path-nav > a {
    @apply hover:underline;
  }
}

@layer components {
  header {
  	@apply max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4;
  }
  
  header h1 {
  	@apply self-center text-2xl font-semibold whitespace-nowrap;
  }
  
  header nav {
  	@apply font-medium flex flex-col p-4 mt-4 border border-gray-100 
		   rounded-lg bg-gray-50 md:p-0 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white;
  }
  
  header nav a {
  	@apply p-1 text-gray-900 md:hover:text-sky-700 md:text-gray-900;
  }

  .pressed {
  	@apply text-sky-700 underline;
  }
}
/*
 * 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.
 *


 */