code, code-wide {
    background-color: #32353c;
    border-radius: 5px;
}

code-wide {
    display: block;
    padding: 1rem 2rem 1rem 1rem;
    font-family: monospace;
}

code-wide span {
    display: block;
    font-family: monospace;
    white-space: nowrap;
    overflow-x: auto;
}

code.inline {
    padding: 3px;
}

code.title {
    margin-right: 5px;
}

* > code-wide {
    position: relative;
}

.copy-code {
    width: 2rem;
    aspect-ratio: 1;
    z-index: 1;
    right: 0;
    top: 0;
    background-color: inherit;

    &, & > * {
        display: inline;
        position: absolute;
    }

    &:hover {
        cursor: pointer;
    }

    div {
        width: 13px;
        height: 13px;
        border-radius: 3px;
        border: 2px solid #c4c4c4;
        background-color: inherit;
    }

    .back {
        z-index: 2;
        left: 10px;
        top: 10px;
    }

    .front {
        z-index: 3;
        left: 5px;
        top: 5px;
    }

    span {
        z-index: 4;
        top: -15px;
        visibility: hidden;
    }

    &:hover span {
        visibility: visible;
    }
}