/* Shared copy-to-clipboard icon + style, used across WAM admin, the tower
 * frontend and the hub. Dependency-free: paired with copy-icon.js. The paste
 * and tick glyphs are drawn with a CSS mask so they inherit `currentColor`
 * and need no inline SVG at each call site.
 *
 * Two presentations, one behaviour (see copy-icon.js):
 *   .btn-copy-icon            -- icon-only button (magic links, passwords, URLs)
 *   <span class="copy-ico">   -- inline glyph for a labelled button, paired
 *                                with a <span class="copy-label"> the JS swaps
 * Both flip paste -> tick and grey -> green while the `.copied` state is on.
 */

.btn-copy-icon,
.copy-ico {
    --copy-ico-paste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M21 14H11'/%3E%3Cpath d='m15 10-4 4 4 4'/%3E%3C/svg%3E");
    --copy-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* icon-only button */
.btn-copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    color: #9ca3af;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    transition: color 0.15s, background-color 0.15s;
}
.btn-copy-icon::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--copy-ico-paste) center / contain no-repeat;
    mask: var(--copy-ico-paste) center / contain no-repeat;
}
.btn-copy-icon:hover {
    color: #4b5563;
    background: rgba(0, 0, 0, 0.06);
}
.btn-copy-icon:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}
.btn-copy-icon.copied {
    color: #16a34a;
}
.btn-copy-icon.copied::before {
    -webkit-mask-image: var(--copy-ico-check);
    mask-image: var(--copy-ico-check);
}

/* inline glyph for a labelled button (keeps the host button's own styling) */
.copy-ico {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--copy-ico-paste) center / contain no-repeat;
    mask: var(--copy-ico-paste) center / contain no-repeat;
}
.copied .copy-ico {
    -webkit-mask-image: var(--copy-ico-check);
    mask-image: var(--copy-ico-check);
}

/* labelled buttons (`.copy-label` swapped to "Copied" by the JS) go green too */
.copied .copy-label {
    color: #16a34a;
}

@media (prefers-color-scheme: dark) {
    .btn-copy-icon {
        color: #6b7280;
    }
    .btn-copy-icon:hover {
        color: #d1d5db;
        background: rgba(255, 255, 255, 0.08);
    }
    .btn-copy-icon.copied {
        color: #4ade80;
    }
}