/**
 * ASQScholar Icon System Styles
 * For use with <x-icon /> Blade component and @icon directive
 */

/* Base icon styles */
.asq-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    fill: currentColor;
}

/* Icon sizing utilities */
.asq-icon-xs { width: 12px; height: 12px; }
.asq-icon-sm { width: 16px; height: 16px; }
.asq-icon-md { width: 20px; height: 20px; }
.asq-icon-lg { width: 24px; height: 24px; }
.asq-icon-xl { width: 32px; height: 32px; }
.asq-icon-2xl { width: 48px; height: 48px; }

/* Icon in buttons - align with text */
.btn .asq-icon {
    margin-right: 0.375em;
    margin-top: -0.125em;
}

.btn .asq-icon:last-child {
    margin-right: 0;
    margin-left: 0.375em;
}

.btn .asq-icon:only-child {
    margin: 0;
}

/* Icon colors */
.asq-icon--gray { color: #6c757d; }
.asq-icon--lightgray { color: #adb5bd; }
.asq-icon--brown { color: #9F6B53; }
.asq-icon--yellow { color: #CB912F; }
.asq-icon--orange { color: #d9730d; }
.asq-icon--green { color: #448361; }
.asq-icon--blue { color: #337ea9; }
.asq-icon--purple { color: #9065B0; }
.asq-icon--pink { color: #C14C8A; }
.asq-icon--red { color: #D44C47; }

/* Missing icon placeholder */
.asq-icon--missing {
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    border-radius: 2px;
}

/* Spinning animation for loading states */
.asq-icon--spin {
    animation: asq-icon-spin 1s linear infinite;
}

@keyframes asq-icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Icon with badge (notification count etc.) */
.asq-icon-wrapper {
    position: relative;
    display: inline-block;
}

.asq-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: white;
    background-color: #dc3545;
    border-radius: 8px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .asq-icon--missing {
        background-color: #2d2d2d;
        border-color: #555;
    }
}

/* ==========================================================================
   Inline Icons (for rich text editors like Summernote)
   ========================================================================== */

/**
 * Inline icons are used when icons are inserted into rich text content.
 * They are designed to flow with text and maintain proper alignment.
 */
.asq-icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    user-select: none;
}

/* Prevent editing of inline icons in contenteditable */
.asq-icon-inline[contenteditable="false"] {
    cursor: default;
}

/* Size variants */
.asq-icon-inline--sm {
    font-size: 16px;
}

.asq-icon-inline--md {
    font-size: 20px;
}

.asq-icon-inline--lg {
    font-size: 24px;
}

.asq-icon-inline--xl {
    font-size: 32px;
}

/* Inline icon SVG styling */
.asq-icon-inline svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

/* Spacing when inline icon is adjacent to text */
.asq-icon-inline + *:not(.asq-icon-inline) {
    margin-left: 0.15em;
}

*:not(.asq-icon-inline) + .asq-icon-inline {
    margin-left: 0.15em;
}

/* In paragraphs and headings */
p .asq-icon-inline,
h1 .asq-icon-inline,
h2 .asq-icon-inline,
h3 .asq-icon-inline,
h4 .asq-icon-inline,
h5 .asq-icon-inline,
h6 .asq-icon-inline,
li .asq-icon-inline,
td .asq-icon-inline,
th .asq-icon-inline {
    vertical-align: middle;
}

/* Hover effect in editable content */
[contenteditable="true"] .asq-icon-inline:hover {
    outline: 2px solid rgba(102, 126, 234, 0.3);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selected state in editor */
[contenteditable="true"] .asq-icon-inline:focus,
[contenteditable="true"] .asq-icon-inline.selected {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Print styles - ensure icons print with their colors */
@media print {
    .asq-icon-inline {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}