/**
 * Oreneta Icon Circle Widget – Styles
 * ─────────────────────────────────────
 * Perfect circle with centered icon.
 */

.oreneta-icon-circle-wrapper {
    display: block;
    line-height: 1;
}

.oreneta-icon-circle {
    --oreneta-circle-size: 80px;
    --oreneta-icon-size: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
    vertical-align: middle;
    text-decoration: none;
    line-height: 1;
    /* Prevent squishing */
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.oreneta-icon-circle i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: var(--oreneta-icon-size);
}

.oreneta-icon-circle svg {
    display: block;
    width: var(--oreneta-icon-size);
    height: var(--oreneta-icon-size);
}

/* When used as a link */
a.oreneta-icon-circle {
    cursor: pointer;
}

a.oreneta-icon-circle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}