.attachments__group {
  @apply grid gap-6 mt-10 justify-start;
  grid-template-columns: repeat(auto-fill, 200px);
}

.attachments__attachment {
  @apply relative w-[200px] h-[200px] bg-cover bg-center bg-no-repeat rounded-lg shadow-md overflow-hidden;
  @apply dark:bg-gray-900;
}

.attachments__attachment:hover {
  @apply opacity-90;
}

.attachments__attachment .attachments__button {
  @apply hidden absolute top-2.5 bg-white bg-opacity-80 p-1.5 rounded-full;
  @apply dark:bg-gray-700 dark:text-white;
}

.attachments__attachment .attachments__button:first-of-type {
  @apply left-2.5;
}

.attachments__attachment .attachments__button:last-of-type {
  @apply right-2.5;
}

.attachments__attachment:hover .attachments__button {
  @apply block;
}

.attachments__attachment .attachments__filename {
  @apply hidden absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-1.5 text-center text-xs;
  @apply dark:bg-gray-900 dark:bg-opacity-90;
}

.attachments__attachment:hover .attachments__filename {
  @apply block;
}

.preview-text {
  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white bg-opacity-70 p-2.5 rounded text-sm text-gray-800;
  @apply dark:bg-gray-800 dark:bg-opacity-70 dark:text-gray-200;
}

@media (max-width: 640px) {
  .attachments__group {
    grid-template-columns: repeat(auto-fill, 150px);
  }

  .attachments__attachment {
    @apply w-[150px] h-[150px];
  }
}

.icon.uploading {
  display: none; /* Ensure this is hidden by default */
}

.uploading .icon.uploading {
  display: inline-block; /* Show only when uploading */
}

.icon.upload {
  display: inline-block; /* Ensure the upload icon is visible */
}

.uploading .icon.upload {
  display: none; /* Hide the upload icon during upload */
}

.attachment-upload-button {
  display: inline-block;
}

.upload-btn {
  @apply dark:bg-gray-900 dark:text-white;
  align-items: center;
  padding: 10px 15px;
  background-color: #f0f0f0;
  border: 2px dashed #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: Arial, sans-serif;
  color: #333;
}

.upload-btn:hover {
  @apply dark:bg-gray-900 dark:text-white dark:border-gray-700;
  background-color: #e0e0e0;
  border-color: #999;
}

.upload-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

.upload-btn .icon {
  margin-right: 10px;
  font-size: 18px;
}

.upload-btn .icon.upload {
  color: #4a90e2;
}

.upload-btn .icon.uploading {
  display: none;
  color: #f39c12;
}

.uploading .upload-btn .icon.upload {
  display: none;
}

.uploading .upload-btn .icon.uploading {
  display: inline-block;
}

.upload-btn .button-text {
  font-size: 14px;
}

.dragging .upload-btn {
  background-color: #e8f0fe;
  border-color: #4285f4;
}

.uploading .upload-btn {
  @apply dark:bg-gray-800 dark:border-gray-600 dark:text-white;
  background-color: #fcf8e3;
  border-color: #f39c12;
  cursor: not-allowed;
}