/**
 * TG-Icon Custom Element Styles
 *
 * Provides base styling and utility classes for <tg-icon> custom elements.
 */

/* Base styling for tg-icon element */
tg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: start;
    vertical-align: middle;
    line-height: 1;
    /* Constrain to 1em square - matches font size */
    width: 1em;
    height: 1em;
}

/* Fixed-width icons for alignment in lists (matching fa-fw) */
tg-icon.icon-fw {
    text-align: center;
    display: inline-flex; /* Use flex to center the SVG */
    justify-content: center;
}

/* Hide until SVG is loaded to prevent FOUC */
tg-icon:not(:has(svg)) {
    visibility: hidden;
}

/* Ensure SVG fills the container */
tg-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Spin animation for loading indicators */
tg-icon.spin svg {
    animation: tg-icon-spin 1s linear infinite;
}

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

/* Ensure icons in table cells have adequate minimum size */
.table td > tg-icon,
.table th > tg-icon {
    min-width: 14px;
    min-height: 14px;
    font-size: 16px; /* For any text-based sizing */
}

/* Optional utility classes for sizing (matching FontAwesome conventions) */
tg-icon.icon-sm {
    font-size: 0.875em; /* 14px if base is 16px */
}

tg-icon.icon-lg {
    font-size: 1.333333em; /* Visually matches fa-lg */
}

tg-icon.icon-xl {
    font-size: 1.5em; /* 24px if base is 16px */
}

tg-icon.icon-2x {
    font-size: 2em;
}

tg-icon.icon-3x {
    font-size: 3em;
}

tg-icon.icon-4x {
    font-size: 4em;
}

tg-icon.icon-5x {
    font-size: 5em;
}

ol.breadcrumb tg-icon {
    margin-bottom: 2px;
}

a.object_identifier tg-icon {
    vertical-align: top;
    margin-top: 4px;
}