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

@layer components {
  body {
    @apply min-h-screen text-gray-700 dark:text-gray-200;
  }

  #header-logo {
    @apply text-blue-500 dark:text-blue-400 text-4xl font-black font-logo underline underline-offset-4 decoration-2 decoration-amber-300 decoration-wavy;
  }

  h1, h2, h3, h4 {
    @apply mb-2 text-blue-800 dark:text-blue-400 font-sans;
  }

  h1 {
    @apply text-2xl font-bold;
  }

  h2 {
    @apply text-lg font-semibold;
  }

  h3 {
    @apply text-lg font-medium;
  }

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

  label {
    @apply text-sm text-gray-500 dark:text-gray-300 font-semibold uppercase;
  }

  trix-toolbar.trix-button--icon-number-list::before {
    @apply dark:bg-gray-500;
  }

  textarea,
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=tel],
  input[type=password],
  input[type=search],
  input[type=number],
  input[type=range],
  select,
  trix-editor.trix-content {
    @apply block rounded-md outline-none p-3;
    @apply bg-white border-gray-200;
    @apply dark:bg-gray-900 dark:border-gray-400 dark:text-gray-300;
    @apply dark:caret-blue-500 dark:focus:ring-blue-500
  }

  input[type=checkbox] {
    @apply w-4 h-4 rounded-sm appearance-none focus:ring-0;
    @apply dark:bg-gray-700;
    @apply focus:checked:bg-yellow-500 checked:bg-yellow-500;
    @apply focus:checked:bg-blue-500 dark:checked:bg-blue-500;
  }

  [class^="btn-"] {
    @apply text-center disabled:bg-gray-300;
  }

  .btn-sm {
    @apply px-2 py-2 rounded-md text-sm font-medium cursor-pointer;
  }

  .btn-md {
    @apply px-3 py-3 rounded-md text-base font-semibold cursor-pointer;
  }

  .btn-lg {
    @apply px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer;
  }

  .btn-green {
    @apply bg-green-500 dark:bg-green-600 text-white dark:text-blue-50 shadow-md hover:shadow-sm;
  }

  .btn-red {
    @apply bg-red-400 dark:bg-red-700 text-white dark:text-blue-50 shadow-md hover:shadow-sm;
  }

  .btn-yellow {
    @apply bg-yellow-400 dark:bg-blue-600 dark:hover:bg-blue-700 text-white dark:text-blue-50 shadow-md hover:shadow-sm;
  }

  .btn-blue {
    @apply bg-blue-400 dark:bg-blue-600 hover:bg-blue-500 dark:hover:bg-blue-700 text-white dark:text-blue-50 shadow-md hover:shadow-sm;
  }

  .btn-clear {
    @apply bg-transparent text-gray-500 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-blue-500 shadow-none hover:shadow-none;
  }

  .text-gray-500 {
    @apply dark:text-gray-400;
  }

  .pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;
    a:not(.gap) {
      @apply block rounded-lg px-3 py-1 bg-gray-200;
      &:hover {
        @apply bg-gray-300;
      }
      &:not([href]) { /* disabled links */
        @apply text-gray-300 bg-gray-100 cursor-default;
      }
      &.current {
        @apply text-white bg-gray-400;
      }
    }
    label {
      @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
      input {
        @apply bg-gray-100 border-none rounded-md;
      }
    }
  }

  /* View Transitions */
  @keyframes slide-from-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes slide-to-right {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }

  @keyframes slide-from-left {
    from {
      transform: translateX(-16rem);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes slide-to-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-16rem);
    }
  }

  ::view-transition-old(peek-sidebar) {
    animation: 300ms ease-in slide-to-right forwards;
  }

  ::view-transition-new(peek-sidebar) {
    animation: 300ms ease-out slide-from-right forwards;
  }

  ::view-transition-old(side-nav) {
    animation: 300ms ease-in slide-to-left forwards;
  }

  ::view-transition-new(side-nav) {
    animation: 300ms ease-out slide-from-left forwards;
  }
}
/*
 * 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.
 *


 */