/*
 * Styles for a rendered Lordicon block.
 *
 * Declared as the block's `style` in block.json, so WordPress loads it in two places: on the
 * published page, and inside the editor canvas iframe. That is deliberate — the canvas now
 * renders the same `<lord-icon>` the visitor gets, so it must be styled by the same rules
 * rather than by a near-duplicate that can drift.
 */

.lordicon-wrapper {
    display: block;
}

.lordicon-wrapper lord-icon {
    display: block;
    width: 24px;
    height: 24px;
}

/*
 * Before the custom element upgrades, the placeholder is an ordinary child of the host and
 * has to be sized here. Afterwards the element's own shadow styles take over.
 */
.lordicon-wrapper lord-icon:not(:defined) {
    svg,
    img {
        display: block;
        width: inherit;
        height: inherit;
    }
}

.lordicon-wrapper-inline-block {
    display: inline-block;
    vertical-align: middle;
}

.lordicon-info {
    display: block;
}

.lordicon-info p {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9;
}

/* Editor-only, but it lives with the other wrapper states rather than in the chrome sheet. */
.lordicon-busy {
    display: flex;
    align-items: center;
    justify-content: center;
}