/**
 * Table Action Icons
 * 
 * Standardized action buttons for table rows (view, edit, delete, archive).
 * Uses CSS variables from style.css :root
 * 
 * Structure:
 * .v-actions
 *   .v-action.v-action--view
 *   .v-action.v-action--edit
 *   .v-action.v-action--archive
 *   .v-action.v-action--delete
 * 
 * @package Verimus
 * @since 2.0.0
 */

/* ==========================================================================
   Actions Container
   ========================================================================== */

.v-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  white-space: nowrap;
}

/* Compact variant */
.v-actions--compact {
  gap: var(--spacing-sm);
}

/* ==========================================================================
   Action Button Base
   ========================================================================== */

.v-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  color: var(--icon-color-default);
  transition: color 0.2s ease;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}

.v-action:hover {
  color: var(--icon-color-hover);
  text-decoration: none;
}

.v-action:focus {
  outline: 2px solid var(--main);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   Action Icons - SVG Styling
   ========================================================================== */

.v-action svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  flex-shrink: 0;
}

.v-action svg path,
.v-action svg circle,
.v-action svg line,
.v-action svg polyline {
  transition: all 0.2s ease;
}

/* ==========================================================================
   Action Variants
   ========================================================================== */

/* View action - filled icon */
.v-action--view svg path {
  fill: var(--icon-color-default);
  stroke: none;
}

.v-action--view:hover svg path {
  fill: var(--main);
}

/* Edit action - stroked icon */
.v-action--edit svg path {
  stroke: var(--icon-color-default);
  fill: none;
}

.v-action--edit:hover svg path {
  stroke: var(--main);
}

/* Archive action - filled icon */
.v-action--archive svg path {
  fill: var(--icon-color-default);
  stroke: none;
}

.v-action--archive:hover svg path {
  fill: var(--main);
}

/* Delete action - stroked icon */
.v-action--delete svg path {
  stroke: var(--icon-color-default);
  fill: none;
}

.v-action--delete:hover svg path {
  stroke: var(--main);
}

/* Danger variant (for destructive actions) */
.v-action--danger:hover svg path {
  stroke: var(--error);
  fill: none;
}

.v-action--danger.v-action--archive:hover svg path,
.v-action--danger.v-action--view:hover svg path {
  fill: var(--error);
  stroke: none;
}

/* Success variant (for restore/approve actions) */
.v-action--success svg path {
  fill: var(--success);
  stroke: none;
}

.v-action--success:hover svg path {
  fill: var(--color-success-dark);
}

/* Download action */
.v-action--download svg path {
  stroke: none;
  fill: var(--icon-color-default);
}

.v-action--download:hover svg path {
  fill: var(--main);
}

/* Send action - stroked icon */
.v-action--send svg path {
  stroke: var(--icon-color-default);
  fill: none;
}

.v-action--send:hover svg path {
  stroke: var(--main);
}

/* Restore action - filled icon with success color */
.v-action--restore svg path {
  fill: var(--icon-color-default);
  stroke: none;
}

.v-action--restore:hover svg path {
  fill: var(--success);
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

.v-action--sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.v-action--sm svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.v-action--lg {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}

.v-action--lg svg {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}

/* ==========================================================================
   Action with Text
   ========================================================================== */

.v-action-text {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--icon-color-default);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.2s ease;
}

.v-action-text:hover {
  color: var(--main);
  text-decoration: none;
}

.v-action-text svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .v-actions {
    gap: var(--spacing-sm);
  }
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

.dark-mode .v-action {
  color: var(--white);
}

.dark-mode .v-action--view svg path {
  fill: var(--white);
}

.dark-mode .v-action--edit svg path,
.dark-mode .v-action--delete svg path {
  stroke: var(--white);
}

.dark-mode .v-action--archive svg path {
  fill: var(--white);
}

.dark-mode .v-action--view:hover svg path {
  fill: var(--main);
}

.dark-mode .v-action--edit:hover svg path,
.dark-mode .v-action--delete:hover svg path {
  stroke: var(--main);
}

.dark-mode .v-action--archive:hover svg path {
  fill: var(--main);
}

.dark-mode .v-action-text {
  color: var(--white);
}

.dark-mode .v-action-text:hover {
  color: var(--main);
}

/* ==========================================================================
   Legacy Action Button Classes
   ========================================================================== */

/* Send/Archive action buttons */
.action-btn.send-btn,
.action-btn.archive-btn {
  opacity: 1;
}

.action-btn.archive-btn {
  padding-left: 0;
}

.v-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  justify-content: center;
}

.v-action--duplicate {
  font-size: 20px;
}

button.v-action--duplicate:focus {
  outline: 2px solid var(--main);
}