/**
 * Styling for the x-lord-icon Blade component.
 *
 * The wrapper owns the box so the layout is stable whether the animated
 * element or the Font Awesome fallback is the one being shown.
 */

.rf-lordicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}

.rf-lordicon > lord-icon {
    display: block;
    width: 100%;
    height: 100%;
}

/* Before the player is defined <lord-icon> is an unknown, zero-size element —
   show the fallback instead of an empty box. */
html:not(.lordicon-ready) .rf-lordicon > lord-icon {
    display: none;
}

html.lordicon-ready .rf-lordicon > .rf-lordicon-fallback {
    display: none;
}

.rf-lordicon > .rf-lordicon-fallback {
    /* Sized against the wrapper's font-size, which the component sets from `size`. */
    font-size: 0.78em;
    line-height: 1;
}