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

@layer components {
  canvas {
    @apply bg-white;
  }

  .link {
    @apply underline text-blue-600;
  }

  .link:hover {
    @apply text-blue-800;
  }

  .btn-primary-xs {
    @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 cursor-pointer;
  }

  .btn-primary-sm {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 cursor-pointer;
  }

  .btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 cursor-pointer;
  }

  .btn-primary-lg {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 cursor-pointer;
  }

  .btn-secondary-xs {
    @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-slate-700 bg-slate-100 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 cursor-pointer;
  }

  .btn-secondary-sm {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-slate-700 bg-slate-100 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 cursor-pointer;
  }

  .btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-slate-700 bg-slate-100 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 cursor-pointer;
  }

  .btn-secondary-lg {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-slate-700 bg-slate-100 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 cursor-pointer;
  }

  .nav-btn {
    @apply text-white hover:bg-slate-500 hover:bg-opacity-75 rounded-md py-2 px-3 text-sm font-medium cursor-pointer;
  }

  .nav-btn.active {
    @apply bg-slate-700 text-white rounded-md py-2 px-3 text-sm font-medium;
  }

  .pagy {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
  }

  .pagy a {
    @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-900 ring-1 ring-inset ring-slate-300 hover:bg-slate-50 focus:z-20 focus:outline-offset-0;
  }

  .pagy a:first-child {
    @apply rounded-l-md px-2 text-slate-400;
  }

  .pagy a:last-child {
    @apply rounded-r-md px-2 text-slate-400;
  }

  .pagy a:not(.gap) {
    @apply text-slate-900 ring-1 ring-inset ring-slate-300 hover:bg-slate-50 focus:outline-offset-0;
  }

  .pagy a:not(.gap):not([href]) {
      @apply text-slate-300 bg-slate-100 cursor-default;
  }

  .pagy a.current:not(.gap) {
    @apply z-10 bg-slate-600 text-white ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600;
  }

  .dropzone.dz-started {
    @apply border-solid;
  }

  .dropzone.dz-started .dz-message {
    @apply hidden;
  }

  .dropzone .dz-preview {
    @apply relative;
  }

  .dropzone .dz-remove {
    @apply hidden;
  }

  .dropzone .dz-success-mark, .dropzone .dz-error-mark {
    @apply hidden pointer-events-none opacity-0 z-[500] bg-white rounded-full;
  }
}
/*
 * 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.
 *


 */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

[data-tooltip-arrow]::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 1rem;
  border-width: 0.5rem;
  border-color: white transparent transparent transparent;
}