@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer components {
  ::selection {
    @apply text-black bg-yellow-200;
  }
  body, html {
    /* For sticky footers. */
    @apply h-full;
  }
  mark {
    @apply bg-yellow-200 p-1;
  }
  ins {
    @apply bg-green-200 text-green-700 no-underline;
  }
  del {
    @apply bg-red-200 text-red-700;
  }

  /* Needed to support the Alpine `x-cloak` attribute. */
  [x-cloak] { display: none !important; }

  /* Theme colors */
  .text-brand { color: #152b48; }
  .bg-brand { background: #152b48; }

  /* Form controls */
  .btn {
    @apply rounded p-2 cursor-pointer select-none;
  }
  .btn-basic {
    @apply bg-slate-100 hover:bg-slate-300;
  }
  .btn-submit {
    @apply bg-brand text-white hover:bg-sky-500 transition;
    @apply active:translate-y-0.5;
  }
  ::file-selector-button {
    @apply border-0 p-2 rounded bg-slate-600 text-white cursor-pointer mr-4 hover:bg-black;
  }
  .f-select {
    @apply rounded text-sm bg-slate-100 text-slate-500 hover:text-slate-800 p-1
  }

  /* Dropdowns (e.g. in proofing editor) */
  .dropdown-pane {
    @apply z-50 bg-white border absolute a-hover-underline;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .dropdown-item {
    @apply block w-full text-left p-2 hover:bg-slate-100;
  }

  /* Sidebar */
  .h-full-minus-nav {
    /* 4rm is based on the header height+margin in include/header.html. */
    /* 3rm is based on the footer height in text-section.html. */
    height: calc(100vh - 3rem - 5rem);
  }

  .x-deva {
    /* TODO: choose a nice typeface. */
  }

  /* Custom elements. */

  s-block {
    @apply block mb-4;
  }
  /* TEI <lg>, i.e. a Sanskrit verse. */
  s-lg {
    @apply block x-deva leading-normal;
  }
  /* TEI <l>, i.e. a line of Sanskrit verse. */
  s-l {
    @apply block;
  }
  /* Represents a parsed word. */
  s-w {
    @apply text-green-600;
    @apply cursor-pointer;
  }
  s-w:hover {
    @apply underline;
  }

  .prose {
    @apply tw-prose tw-prose-slate;
  }
  .prose dt {
    @apply uppercase text-xs font-bold text-slate-400 mb-1;
  }
  .prose dd {
    @apply mb-4;
  }

  /* Custom */
  .a-underline a {
      @apply underline;
  }
  .a-hover-underline a {
      @apply hover:underline;
  }

  /* MW dictionary */
  .dict-entry {max-width: 700px; margin: 0.5em 0;}
  .dict-entry .lex {font-weight: bold; }
  .dict-entry cite {
    @apply text-sm text-slate-400;
  }

  /* Vacaspatyam */
  .dict-entry q {
    @apply text-slate-400;
  }
  .mw-entry [lang=sa] {
    @apply text-green-600;
  }

  /* Classes created by Flask-admin */
  .pagination {
    @apply border rounded my-4;
  }
  .pagination ul { @apply flex; }
  .pagination li.active { @apply font-bold text-white bg-sky-900; }
  .pagination a { @apply py-2 px-4 block hover:bg-slate-200; }

  /* heatmap */
  .heatmap text { @apply text-xs; }
  .heatmap rect.l1 { @apply fill-slate-100; }
  .heatmap rect.l2 { @apply fill-sky-100; }
  .heatmap rect.l3 { @apply fill-sky-200; }
  .heatmap rect.l4 { @apply fill-sky-300; }

}

