.ro-contact {
    margin: 0;
    font: inherit;
    line-height: normal;
}

.ro-contact__link {
    text-decoration: none;
}

.ro-contact__link * {
    pointer-events: none;
}

.ro-contact__icon {
    display: inline-block;
    width: 1em;
    margin-right: .2em;
    vertical-align: middle;
}

.ro-contact__icon .icon {
    object-fit: contain;
    margin: auto;
}

/**
 * ro-contact--list
 * Icon and text layout
 */

.ro-contact--list .ro-contact__link {
    display: block;
    margin-top: .5em;
    white-space: nowrap;
}

.ro-contact--list .ro-contact__link:hover .ro-contact__info {
    text-decoration: underline;
}

.ro-contact--list .icon {
    display: block;
    height: .9em;
}

/* @todo: should links be ellip… */
 .ro-contact__info {
     display: inline-block;
     max-width: calc(100% - 1.3em);
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;
}

/**
 * .ro-contact--icons
 * Icon buttons layout
 */

.ro-contact--icons {
    display: inline-flex;/** inline-flex so they can be centered */
    gap: .25em;
}

.ro-contact--icons .ro-contact__info {
    position: absolute;
    left: -999em;
}

.ro-contact--icons .ro-contact__icon {
    position: relative;
    width: 2em;
    height: 2em;
    border-radius: calc(var(--pbui-radius) / 2);
    border: 1px solid var(--pbui-dividerColor, rgb(0 0 0 / 10%));
    font-size: .9rem;
}

.ro-contact--icons .icon {
    position: absolute;
    inset: .35em;
    display: block;
    width: auto;
}