@layer flux-base {
    .icon {
        height: 1em;
        width: 1em;
        flex-shrink: 0;
        font-size: 20px;
        line-height: 1;
        overflow: visible;
    }

    .fontAwesomeIcon {
        composes: icon;

        display: inline-block;

        &:has(> path:nth-child(2)) path:first-child {
            opacity: .2;
        }
    }

    .iconFont {
        composes: icon;

        display: inline-grid;
        place-items: center;
        justify-content: center;
        font-style: normal;
        font-variant-ligatures: normal;
        white-space: nowrap;
    }

    // A duotone glyph is drawn as two stacked layers: the primary shape over the
    // dimmed secondary. Both sit in the same grid cell so they overlap exactly.
    .iconFontPrimary,
    .iconFontSecondary {
        grid-area: 1 / 1;
    }

    .iconFontSecondary {
        // Match the SVG duotone rendering, which dims the secondary path to .2.
        opacity: var(--fa-secondary-opacity, .2);
    }

    .iconBoxed {
        display: flex;
        height: 1em;
        width: 1em;
        align-items: center;
        flex-shrink: 0;
        justify-content: center;
        background: var(--surface);
        background-clip: padding-box;
        border: 1px solid var(--surface-stroke-out);
        border-radius: var(--radius);
        font-size: 42px;

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

        &.isRounded {
            border-radius: var(--radius-full);
        }
    }
}

.iconGray {
    color: var(--gray-600);
}

.iconPrimary {
    color: var(--primary-600);
}

.iconDanger {
    color: var(--danger-600);
}

.iconInfo {
    color: var(--info-600);
}

.iconSuccess {
    color: var(--success-600);
}

.iconWarning {
    color: var(--warning-600);
}

.iconBoxedDefault {
    composes: iconBoxed;

    box-shadow: var(--shadow-sm);
}

.iconBoxedColored {
    composes: iconBoxed;

    border: 0;
}

.iconBoxedGray {
    composes: iconBoxedColored;

    background: var(--gray-100);
    color: var(--foreground);
}

.iconBoxedPrimary {
    composes: iconBoxedColored;

    background: var(--primary-100);
    color: var(--primary-900);
}

.iconBoxedDanger {
    composes: iconBoxedColored;

    background: var(--danger-100);
    color: var(--danger-900);
}

.iconBoxedInfo {
    composes: iconBoxedColored;

    background: var(--info-100);
    color: var(--info-900);
}

.iconBoxedSuccess {
    composes: iconBoxedColored;

    background: var(--success-100);
    color: var(--success-900);
}

.iconBoxedWarning {
    composes: iconBoxedColored;

    background: var(--warning-100);
    color: var(--warning-900);
}