:root {
    --color-active-code-on: #d42214ff;
}

.active-explanation {
    display: none;
}

pre.active-code {
    position: relative;
    display: block;
}

.active-code-icon {
    position: absolute;
    top: 0.5em;
    right: 2em;
    width: 20px;
    height: 20px;
    z-index: 2;
    /*pointer-events: none;*/
    transition: filter 0.2s;
}

.active-code-icon:hover {
    filter: brightness(0.5);
}

.active-code-copy-icon {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    width: 20px;
    height: 20px;
    z-index: 2;
    /*pointer-events: none;*/
    transition: filter 0.2s;
}

.active-code-copy-icon:not(.active-code-copy-icon-clicked):hover {
    filter: brightness(0.5);
}

.active-fragment {
    display: inline-block;
    position: relative;
}

.active-fragment-active {
    border: 0.5px solid rgba(0, 0, 0, 0.1);
}

.active-fragment-active:hover, .active-fragment-highlighted {
    background-color: white;
    border-color: var(--color-active-code-on);
}

.active-code-explanation {
    position: absolute;
    white-space: normal; /* It's a child of a pre, so it needs this */;
    padding: 0.5em;
    border: 1px solid var(--color-active-code-on);
    background-color: #fffbe6; /* cream background */
    border-radius: 8px; /* rounded corners */
    z-index: 2;
}