/*
 * prism-toolbar-icons.css
 *
 * Restyles Prism's toolbar buttons (copy + custom download) to be icon-only
 * square buttons instead of plain text links. The toolbar plugin renders each
 * action as a <span class="toolbar-item"> containing either a <button> (the
 * native copy-to-clipboard plugin) or an <a> (custom buttons we register
 * ourselves via Prism.plugins.toolbar.registerButton).
 *
 * Strategy:
 *   - Set the button to a fixed 32x32 box.
 *   - Hide the text content via font-size:0 on the wrapper while preserving
 *     accessible text via the actual element's title attribute (we set that
 *     in main.js for the download button; the copy plugin sets it on its own
 *     button).
 *   - Show an inline SVG icon via background-image, sized and centered.
 *
 * This file gets loaded after prism-toolbar.css so its rules win on cascade.
 */

div.code-toolbar > .toolbar {
    /* Make the toolbar background a touch more visible against the dark code area. */
    opacity: 1;
    top: 0.5em;
    right: 0.5em;
    display: flex;
    gap: 6px;
}

div.code-toolbar > .toolbar > .toolbar-item {
    margin: 0;
}

div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > span {
    /* Hide the visible text but keep the element accessible to screen readers
       via title attribute. */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;

    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: none;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;

    cursor: pointer;
    transition: background-color 0.15s ease;
    text-decoration: none;
}

div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > a:hover {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Copy button — added automatically by Prism's copy-to-clipboard plugin. */
div.code-toolbar > .toolbar > .toolbar-item > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
}

/* Light-mode variants — darker icons on a light, subtle background. */
.shift-docs:not(.shift-dark) div.code-toolbar > .toolbar > .toolbar-item > button,
.shift-docs:not(.shift-dark) div.code-toolbar > .toolbar > .toolbar-item > a,
.shift-docs:not(.shift-dark) div.code-toolbar > .toolbar > .toolbar-item > span {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
}

.shift-docs:not(.shift-dark) div.code-toolbar > .toolbar > .toolbar-item > button:hover,
.shift-docs:not(.shift-dark) div.code-toolbar > .toolbar > .toolbar-item > a:hover {
    background-color: rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.3);
}

.shift-docs:not(.shift-dark) div.code-toolbar > .toolbar > .toolbar-item > button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
}