/* =============================================================================
   Action Icons - Unified Icon System

   Phase 22: Consistent icon/button components for favorite, bookmark, share
   across all contexts (TOC, books, history, article footer).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base Action Icon Styles
   ----------------------------------------------------------------------------- */

.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: #ccc;
}

.action-icon:hover {
    background: rgba(139, 115, 85, 0.1);
}

.action-icon:disabled,
.action-icon.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.action-icon:disabled:hover,
.action-icon.disabled:hover {
    background: transparent;
}

/* With label variant - changes to inline-flex row, pill shape */
.action-icon.with-label {
    border-radius: 20px;
    padding: 0.5rem 0.75rem;
    gap: 0.375rem;
    border: 1px solid #ddd;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
}

.action-icon.with-label:hover {
    border-color: currentColor;
    background: rgba(139, 115, 85, 0.05);
}

.action-icon__label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}

.action-icon.active .action-icon__label {
    color: #8b7355;
}

/* -----------------------------------------------------------------------------
   Size Variants
   ----------------------------------------------------------------------------- */

.action-icon--sm {
    width: 28px;
    height: 28px;
}

.action-icon--sm.with-label {
    width: auto;
    height: auto;
}

.action-icon--md {
    width: 32px;
    height: 32px;
}

.action-icon--md.with-label {
    width: auto;
    height: auto;
}

.action-icon--lg {
    width: 40px;
    height: 40px;
}

.action-icon--lg.with-label {
    width: auto;
    height: auto;
}

/* -----------------------------------------------------------------------------
   Favorite Icon States
   ----------------------------------------------------------------------------- */

.action-icon--favorite {
    color: #ccc;
}

.action-icon--favorite:hover {
    color: #d4a537;
}

.action-icon--favorite.active {
    color: #d4a537;
}

.action-icon--favorite.active:hover {
    color: #b8922f;
}

/* Animation on toggle */
@keyframes icon-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.action-icon--favorite.animating .action-icon__svg {
    animation: icon-pulse 0.3s ease;
}

/* -----------------------------------------------------------------------------
   Bookmark Icon States
   ----------------------------------------------------------------------------- */

.action-icon--bookmark {
    color: #ccc;
}

.action-icon--bookmark:hover {
    color: #3498db;
}

.action-icon--bookmark.active {
    color: #3498db;
}

.action-icon--bookmark.active:hover {
    color: #2980b9;
}

.action-icon--bookmark.animating .action-icon__svg {
    animation: icon-pulse 0.3s ease;
}

/* -----------------------------------------------------------------------------
   Share Icon States
   ----------------------------------------------------------------------------- */

.action-icon--share {
    color: #ccc;
}

.action-icon--share:hover {
    color: #3498db;
}

.action-icon--share.active {
    color: #3498db;
}

.action-icon--share.active:hover {
    color: #2980b9;
}

/* Disabled state for unpublished articles */
.action-icon--share.disabled {
    color: #ddd;
}

/* -----------------------------------------------------------------------------
   Reading Status Icon (Link variant, not button)

   Note: reading_status_icon uses different class names for compatibility.
   This section provides the unified .action-icon version.
   ----------------------------------------------------------------------------- */

.action-icon--reading-status {
    text-decoration: none;
}

.action-icon--reading-status.not-started {
    color: #ccc;
}

.action-icon--reading-status.in-progress {
    color: #95a5a6;
}

.action-icon--reading-status.finished {
    color: #27ae60;
}

.action-icon--reading-status:hover {
    color: #8b7355;
}

/* -----------------------------------------------------------------------------
   Action Icon Group (horizontal row of icons)
   ----------------------------------------------------------------------------- */

.action-icons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.action-icons--compact {
    gap: 0.125rem;
}

.action-icons--spaced {
    gap: 0.5rem;
}

/* -----------------------------------------------------------------------------
   Mobile Adjustments
   ----------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .action-icon--sm {
        width: 32px;
        height: 32px;
    }

    .action-icon.with-label {
        padding: 0.6rem 1rem;
    }
}

/* =============================================================================
   Action Buttons - Button variants with labels (Phase 22b)

   Used in article footer and other contexts where larger buttons with
   text labels are appropriate.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Button Group Container
   ----------------------------------------------------------------------------- */

.action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-buttons--compact {
    gap: 0.25rem;
}

.action-buttons--spaced {
    gap: 0.75rem;
}

/* -----------------------------------------------------------------------------
   Base Action Button Styles
   ----------------------------------------------------------------------------- */

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}

.action-button:hover {
    border-color: #8b7355;
    background: rgba(139, 115, 85, 0.05);
    color: #8b7355;
}

.action-button__svg {
    flex-shrink: 0;
}

.action-button__label {
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Reading Status Button States
   ----------------------------------------------------------------------------- */

.action-button--reading-status {
    color: #555;
}

.action-button--reading-status.not_started {
    color: #999;
}

.action-button--reading-status.not_started:hover {
    color: #8b7355;
    border-color: #8b7355;
}

.action-button--reading-status.in_progress {
    color: #95a5a6;
    border-color: #95a5a6;
}

.action-button--reading-status.in_progress:hover {
    color: #8b7355;
    border-color: #8b7355;
}

.action-button--reading-status.finished {
    color: #27ae60;
    border-color: #27ae60;
}

.action-button--reading-status.finished:hover {
    color: #219a52;
    border-color: #219a52;
}

/* Checkmark styling for in_progress (dashed) and finished (solid) */
.action-button--reading-status.in_progress svg polyline {
    stroke-dasharray: 4 2;
}

/* -----------------------------------------------------------------------------
   Mobile Adjustments
   ----------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .action-buttons {
        gap: 0.375rem;
    }

    .action-button {
        padding: 0.6rem 1rem;
    }
}