/* =========================
   BASE ICON CONTAINER
========================= */

.fluent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
}

/* =========================
   SVG RESET (IMPORTANT)
========================= */

.fluent-icon svg {
    width: 1em;
    height: 1em;
    display: block;
    pointer-events: none;
}

/* =========================
   SIZE SYSTEM (FLUENT SCALE)
   (aligned with your spacing scale)
========================= */

.fluent-sm {
    font-size: var(--ms-font-size-sm, 16px);
}

.fluent-md {
    font-size: var(--ms-font-size-md, 20px);
}

.fluent-lg {
    font-size: var(--ms-font-size-lg, 24px);
}

.fluent-xl {
    font-size: var(--ms-font-size-xl, 32px);
}

.fluent-icon-hover:hover {
    transform: scale(1.08);
    opacity: var(--ms-opacity-hover, 0.8);
}

/* =========================
   COLOR INHERITANCE (NO DUPLICATION WITH color_utils)
   👉 IMPORTANT: jangan hardcode color lagi di sini
========================= */

/* only ensure correct inheritance behavior */
.fluent-icon {
    color: inherit;
}