@import "tailwindcss";

.shimmer-placeholder {
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: shimmer-sweep 1.5s infinite linear;
}

@keyframes shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Action Text styles for rich text editor */
.trix-editor {
  @apply min-h-[200px] px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent;
}

.trix-button-group button {
  @apply text-gray-700 hover:text-orange-500;
}

.trix-image-resize-toolbar {
  @apply fixed z-50 flex gap-1 bg-white border border-gray-300 rounded-md shadow-md p-1;
}

.trix-image-resize-btn {
  @apply px-2 py-1 text-xs font-medium text-gray-700 rounded hover:bg-orange-100 hover:text-orange-600 cursor-pointer;
}

.trix-image-resize-handle {
  @apply fixed z-50 w-4 h-4 bg-orange-500 border-2 border-white rounded-full shadow cursor-nwse-resize;
}

.trix-button--icon-bold::before,
.trix-button--icon-italic::before,
.trix-button--icon-link::before,
.trix-button--icon-quote::before,
.trix-button--icon-code::before,
.trix-button--icon-bullet-list::before,
.trix-button--icon-number-list::before,
.trix-button--icon-undo::before,
.trix-button--icon-redo::before {
  @apply text-gray-600;
}

.trix-button--icon-bold.trix-active::before,
.trix-button--icon-italic.trix-active::before,
.trix-button--icon-link.trix-active::before,
.trix-button--icon-quote.trix-active::before,
.trix-button--icon-code.trix-active::before,
.trix-button--icon-bullet-list.trix-active::before,
.trix-button--icon-number-list.trix-active::before {
  @apply text-orange-500;
}