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


@layer base {
  h1 {
    @apply text-3xl font-bold leading-tight text-gray-900;
  }
}

@layer components {
  .nav-tab--current {
    @apply bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium;
  }
  .nav-tab {
    @apply text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium;
  }

  .paginate-page {
    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
  }
  
  .paginate-prev-page,
  .paginate-next-page,
  .paginate-first-page,
  .paginate-last-page {
    @apply px-2
  }
  .paginate-page--current {
    @apply bg-gray-100;
  }
  .paginate-first-page {
    @apply rounded-l-md;
  }
  .paginate-last-page {
    @apply rounded-r-md;
  }
  .paginate-page-single {
    @apply rounded-md text-gray-700 hover:text-gray-500;
  }

  .pill {
    @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
  }
  .pill-server {
    background-color: cyan;
    color: #666666;
  }
  .pill-organisation {
    background-color: yellow;
    color: #666666;
  }
  .pill-issue {
    background-color: orange;
    color: #666666;
  }
  .pill-cron {
    background-color: #cdcdcd;
    color: #666666;
  }
  .pill-list {
    background-color: lime;
    color: #666666;
  }
  .pill-junk {
    background-color: #222222;
    color: #666666;
  }
  
  .email-header-name {
    @apply w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider
  }

}