/* Admin-specific imports not in application.tailwind.css */

/* uppy file input + tailwindcss */
/* stylelint-disable */
.uppy-FileInput-container {
  button {
    @apply px-3 py-2 ml-5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-xs leading-4 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }
}

.uppy-FileInput-input {
  display: none;
}
/* stylelint-enable */

/* some random comment */
span.help-block {
  @apply mt-2 text-sm text-red-600;
}

.form-group.has-error {
  input {
    @apply block w-full pr-10 text-red-900 placeholder-red-300 border-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md;
  }
}

span.error {
  @apply mt-2 text-sm text-red-600;
}

/* notificationd animation */
@keyframes notification-countdown {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}

/* Sortable drag and drop styles */
.sortable-ghost {
  border: 2px dashed rgb(99 102 241) !important;
  opacity: 0.4;
}

.sortable-chosen {
  /* border: 2px dashed rgb(99 102 241) !important; */

  /* background-color: rgb(238 242 255) !important; */
}

.sortable-drag {
  /* border: 2px dashed rgb(99 102 241) !important; */

  /* box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); */
}

.sortable-dropzone {
  /* border: 2px dashed rgb(99 102 241) !important; */

  /* background-color: rgb(238 242 255) !important; */
}

.sortable-swap-highlight {
  background-color: rgb(238 242 255) !important;
  border-color: rgb(99 102 241) !important;
  border-width: 3px !important;
}

.sortable-dropzone-highlight {
  background-color: rgb(238 242 255) !important;
  border-color: rgb(99 102 241) !important;
  border-width: 3px !important;
}

/* Puzzle piece styles */
.puzzle-piece {
  transition: transform 0.2s, border-color 0.2s;
}

.puzzle-piece:hover {
  transform: scale(1.05);
}