/* =============================================== */
/*    Icon Size Utilities                         */
/* =============================================== */
/*
 * Reusable icon size classes for Feather icons, SVG, and icon elements
 * 
 * Usage:
 *   <span data-feather="icon-name" class="icon-sm"></span>
 *   <svg class="icon-md">...</svg>
 * 
 * Compatible with Phoenix theme and follows DRY principles
 */

/* Tiny - 10px */
.icon-tiny {
    width: 10px !important;
    height: 10px !important;
}

/* Extra Small - 12px */
.icon-xs {
    width: 12px !important;
    height: 12px !important;
}

/* Small - 14px */
.icon-sm {
    width: 14px !important;
    height: 14px !important;
}

/* Medium (Default) - 16px */
.icon-md {
    width: 16px !important;
    height: 16px !important;
}

/* Large - 18px */
.icon-lg {
    width: 18px !important;
    height: 18px !important;
}

/* Extra Large - 20px */
.icon-xl {
    width: 20px !important;
    height: 20px !important;
}

/* 2X Large - 24px */
.icon-2xl {
    width: 24px !important;
    height: 24px !important;
}

/* 3X Large - 28px */
.icon-3xl {
    width: 28px !important;
    height: 28px !important;
}

/* 4X Large - 48px */
.icon-4xl {
    width: 48px !important;
    height: 48px !important;
}

/* 5X Large - 64px */
.icon-5xl {
    width: 64px !important;
    height: 64px !important;
}

/* =============================================== */
/*    Spinner Size Utilities                       */
/* =============================================== */
/*
 * Size utilities for spinner elements - non-conflicting with Bootstrap
 *
 * Usage:
 *   <div class="spinner-border spinner-icon-sm"></div>
 *
 * Note: Add alongside existing Bootstrap spinner classes, don't replace them
 */

/* Spinner Extra Small - 12px */
.spinner-icon-xs {
    width: 12px !important;
    height: 12px !important;
    border-width: 1px !important;
}

/* Spinner Small - 14px */
.spinner-icon-sm {
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
}

/* Spinner Medium - 18px */
.spinner-icon-md {
    width: 18px !important;
    height: 18px !important;
    border-width: 2px !important;
}

/* =============================================== */
/*    Icon Button Hover Utilities                 */
/* =============================================== */
/*
 * Reusable hover effect for icon buttons within hover-actions-trigger containers
 * 
 * Usage:
 *   <div class="hover-actions-trigger">
 *       <button class="btn-icon-hover rounded-circle p-2">
 *           <span data-feather="copy" class="icon-sm text-body-tertiary"></span>
 *       </button>
 *   </div>
 * 
 * States:
 *   - Default: transparent background, icon only
 *   - Parent hover: semi grey background
 *   - Button hover: full grey background
 */

.btn-icon-hover {
    background-color: transparent;
    border: none;
    transition: background-color 0.15s ease-in-out;
}

.hover-actions-trigger:hover .btn-icon-hover {
    background-color: var(--phoenix-secondary-bg);
}

.btn-icon-hover:hover {
    background-color: var(--phoenix-tertiary-bg) !important;
}

/* =============================================== */
/*    HTMX Indicator Override                      */
/* =============================================== */
/*
 * Override default htmx-indicator behavior to use display instead of opacity.
 * This prevents the indicator from reserving space when hidden.
 *
 * Default HTMX uses opacity:0 which still takes up layout space.
 * This override uses display:none so element is completely removed from flow.
 */

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}