/* The action row on a Lean code block: the copy button `copy.js` adds, and the
   Playground link `playground-button.js` adds beside it. See that file. */

.code-block-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    gap: var(--space-2);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* `:focus-within` so that the buttons are reachable by keyboard, which a row
   revealed only on hover otherwise is not. */
.code-block-wrapper:hover .code-block-actions,
.code-block-actions:focus-within {
    opacity: 1;
}

/* Inside the row, the row does the positioning and the fading that
   `copy-button.css` does for a lone button. */
.code-block-actions .copy-button {
    position: static;
    opacity: 1;
}

/* An anchor rather than a button, so it has to be talked out of the article
   link styling before it matches the copy button beside it. */
.code-block-actions .playground-button {
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
}

/* Drawn the way `copy-button.css` draws the copy icon: Eva Icons' `external-link-outline`. */
.code-block-actions .playground-button::before {
    --playground-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg data-name='Layer 2'%3E%3Cg data-name='external-link'%3E%3Crect width='24' height='24' opacity='0'/%3E%3Cpath d='M20 11a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1z'/%3E%3Cpath d='M16 5h1.58l-6.29 6.28a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L19 6.42V8a1 1 0 0 0 1 1 1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-4a1 1 0 0 0 0 2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--playground-icon) center / contain no-repeat;
    mask: var(--playground-icon) center / contain no-repeat;
}

.code-block-actions .playground-button:hover {
    border-color: var(--color-primary);
    background: var(--color-bg);
    color: var(--color-primary);
}

/* Touch screens never hover, so the row would stay invisible while its buttons
   still catch taps on the code. On the home page's samples it stays shown
   instead, in a strip of its own above the first line so it doesn't cover the
   code, with tap areas sized for a finger. */
@media (hover: none) {
    #why-lean .code-block-actions,
    .code-feature .code-block-actions {
        opacity: 1;
    }

    #why-lean .code-block-wrapper:has(> .code-block-actions),
    .code-feature .code-block-wrapper:has(> .code-block-actions) {
        padding-top: 2.5rem;
    }

    /* Relative so the tap area below can hang off it; that would also apply the
       `top`/`right` that `copy-button.css` gives a lone copy button, so clear them. */
    #why-lean .code-block-actions > *,
    .code-feature .code-block-actions > * {
        position: relative;
        inset: auto;
    }

    /* Grow the tap area to fill the strip without changing the layout. */
    #why-lean .code-block-actions > *::after,
    .code-feature .code-block-actions > *::after {
        content: "";
        position: absolute;
        inset: -6px -4px;
    }
}