Bober

/* OptiKit Code Block Frontend Styles */
.wp-block-optikit-code-block {
    margin-bottom: 1.5em;
    /* A széles és teljes szélességű blokkok kezelése, ha a téma nem tenné meg */
    max-width: 100%;
}

.wp-block-optikit-code-block pre[class*="language-"] {
    margin: 0;
    font-size: 14px;
}

/* ÚJ SZABÁLY: Sortörés (word wrap) kezelése */
/* Alapértelmezetten a Prism.js a pre-wrap-ot használja, de mi felülírjuk a vízszintes görgetéshez */
.wp-block-optikit-code-block:not(.has-line-wrap) pre[class*="language-"] {
    white-space: pre; /* Vízszintes görgetősáv megjelenítése hosszú soroknál */
    overflow: auto;   /* Görgetősáv hozzáadása */
}

/* Ha a sortörés be van kapcsolva, ezt az osztályt használjuk */
.wp-block-optikit-code-block.has-line-wrap pre[class*="language-"] {
    white-space: pre-wrap;     /* Törje a sorokat, de tartsa meg a szóközöket */
    word-break: break-all;     /* Törje meg a szavakat, ha szükséges */
}

/* A Prism.js Toolbar (másolás gomb) pozicionálása */
div.code-toolbar > .toolbar {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

div.code-toolbar:hover > .toolbar {
    opacity: 1;
}

.toolbar-item > .copy-to-clipboard-button {
    background: #555;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}

.toolbar-item > .copy-to-clipboard-button:hover {
    background: #777;
}