/* Layout-neutral hover clipboard copy.
   Host shrink-wraps to the text; icon sits just after the value.
   Host keeps padding-right so the icon stays inside the hover hitbox
   (otherwise moving onto the icon leaves :hover and it vanishes).
   Use :focus-visible (not :focus) so a mouse click does not leave the
   clipboard icon stuck visible after the tick fades. */

.portal-clipboard-root {
    /* Outer mount (e.g. table cell) keeps its normal layout. */
}

.portal-clipboard-host {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: baseline;
    /* Include icon strip in hover hitbox without shifting the glyphs. */
    padding-right: 16px;
    margin-right: -16px;
}

.portal-clipboard-text {
    /* Text metrics unchanged. */
}

.portal-clipboard-btn {
    position: absolute;
    right: 0;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #777;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    line-height: 0;
    z-index: 2;
    transition: opacity 0.15s ease;
}

.portal-clipboard-host:hover .portal-clipboard-btn,
.portal-clipboard-btn:focus-visible,
.portal-clipboard-btn.is-copied {
    opacity: 1;
    pointer-events: auto;
}

.portal-clipboard-btn.is-fading {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.portal-clipboard-btn:hover,
.portal-clipboard-btn:focus-visible {
    color: #4c0066;
    outline: none;
}

.portal-clipboard-btn:focus-visible {
    outline: 1px solid #4c0066;
    outline-offset: 1px;
}

.portal-clipboard-btn svg {
    display: block;
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.portal-clipboard-btn.is-copied {
    color: #2e7d32;
}