/* ============================================================================
   Bootstrap Icons Utility Classes
   FlowDocs - Pro Kinetics Design System
   ============================================================================ */

/* Icon Sizing Utilities
   ========================================================================== */
.icon-sm {
    font-size: var(--text-label);
}

.icon-base {
    font-size: var(--text-md);
}

.icon-lg {
    font-size: 1.25rem;  /* 20px — no exact token */
}

.icon-xl {
    font-size: 1.5rem;  /* 24px — no exact token */
}

.icon-2xl {
    font-size: var(--text-4xl);
}

.icon-3xl {
    font-size: var(--text-5xl);
}


/* Icon Alignment
   ========================================================================== */
.icon-inline {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.icon-inline-end {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.icon-center {
    display: inline-block;
    vertical-align: middle;
}


/* Empty State Icons
   ========================================================================== */
.empty-state-icon {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-5, 1.5rem);
    color: var(--pk-gray-400);
}


/* Status Icons (Pro Kinetics Colors)
   ========================================================================== */
.icon-success {
    color: var(--pk-success);
}

.icon-error {
    color: var(--pk-error);
}

.icon-warning {
    color: var(--pk-warning);
}

.icon-info {
    color: var(--pk-info);
}

.icon-muted {
    color: var(--pk-gray-500);
}


/* Navigation Icons
   ========================================================================== */
.icon-nav {
    font-size: var(--text-xl);
    vertical-align: middle;
}


/* Badge Icons
   ========================================================================== */
.icon-badge {
    font-size: var(--text-label);
    margin-right: 0.25rem;
    vertical-align: baseline;
}


/* Button Icons
   ========================================================================== */
.icon-button {
    font-size: var(--text-md);
    margin-right: 0.5rem;
    vertical-align: middle;
}

.icon-button-end {
    font-size: var(--text-md);
    margin-left: 0.5rem;
    vertical-align: middle;
}


/* Accessibility
   ========================================================================== */