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

/*

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

*/

/* Pagy styles added here because I couldn't get @import or @layer to work */
.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;
}

.pagy a:not(.gap) {
  @apply block rounded-lg px-3 py-1 bg-gray-200;
}

.pagy a:not(.gap):hover {
  @apply bg-gray-300;
}

.pagy a:not(.gap):not([href]) { /* disabled links */
  @apply text-gray-300 bg-gray-100 cursor-default;
}

.pagy a:not(.gap).current {
  @apply text-white bg-gray-400;
}

.pagy label {
  @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
}

.pagy label input {
  @apply bg-gray-100 border-none rounded-md;
}

/* tom-select style overrides */
.ts-control {
  border: none !important;
  padding: 0 !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}
.ts-wrapper {
  @apply w-full !ml-0;
}

.ts-control {
  @apply shadow-sm rounded-lg border-gray-300 bg-white py-2 px-3 text-base;
}

.ts-caret {
  /* Add caret https://github.com/orchidjs/tom-select/discussions/384 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}

.ts-dropdown {
  @apply rounded-md border border-solid border-t border-gray-300 text-base;
}

.ts-dropdown [data-selectable].option:first-child {
  @apply rounded-t-lg;
}

.ts-dropdown [data-selectable].option:last-child {
  @apply rounded-b-lg;
}

.ts-dropdown .create:hover, .ts-dropdown .option:hover{
  @apply bg-sky-50 text-sky-900;
}

.ts-dropdown .active {
  @apply bg-gray-100 text-gray-900;
}

/* Dropzone styles for variant colour images */
.dropzone {
  @apply border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer mb-4;
}

.dropzone:hover {
  @apply border-indigo-500;
}

.dropzone-multiple .dz-preview {
  @apply inline-block m-2 relative;
}

.dropzone-multiple .dz-preview .dz-image {
  @apply w-32 h-32 rounded-lg overflow-hidden flex items-center justify-center bg-gray-100;
}

.dropzone-multiple .dz-preview .dz-image img {
  @apply w-full h-full object-cover;
}

.dropzone-multiple .dz-preview .dz-details {
  @apply text-xs mt-1 truncate w-32;
}

.dropzone-multiple .dz-preview .dz-progress {
  @apply w-full h-1 bg-gray-200 absolute bottom-0 left-0;
}

.dropzone-multiple .dz-preview .dz-progress .dz-upload {
  @apply h-full bg-indigo-500 transition-all;
}

.dropzone-multiple .dz-preview .dz-error-message {
  @apply text-xs text-red-500 mt-1;
}

.dropzone-multiple .dz-preview .dz-remove {
  @apply text-xs text-red-500 cursor-pointer mt-1 block;
}

.dropzone-multiple .dz-preview .dz-set-primary {
  @apply text-xs mt-1 block;
}

.dropzone-multiple .dz-preview.primary-image .dz-image {
  @apply ring-2 ring-indigo-500;
}

@layer components {
  .drawer-container {
    position: relative;
    z-index: 50;
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out;
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}