/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+jsx+tsx+typescript&plugins=toolbar+copy-to-clipboard */
code[class*=language-], pre[class*=language-] {
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    color: #c3cee3;
    background: #263238;
    font-family: Roboto Mono,monospace;
    font-size: 1em;
    line-height: 1.5em;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

:not(pre) > code[class*=language-] {
    white-space: normal;
    border-radius: .2em;
    padding: .1em
}

pre[class*=language-] {
    overflow: auto;
    position: relative;
    margin: .5em 0;
    padding: 1.25em 1em
}

.language-css > code, .language-sass > code, .language-scss > code {
    color: #fd9170
}

[class*=language-] .namespace {
    opacity: .7
}

.token.atrule {
    color: #c792ea
}

.token.attr-name {
    color: #ffcb6b
}

.token.attr-value {
    color: #c3e88d
}

.token.attribute {
    color: #c3e88d
}

.token.boolean {
    color: #c792ea
}

.token.builtin {
    color: #ffcb6b
}

.token.cdata {
    color: #80cbc4
}

.token.char {
    color: #80cbc4
}

.token.class {
    color: #ffcb6b
}

.token.class-name {
    color: #f2ff00
}

.token.color {
    color: #f2ff00
}

.token.comment {
    color: #b8b8b8
}

.token.constant {
    color: #c792ea
}

.token.deleted {
    color: #f07178
}

.token.doctype {
    color: #546e7a
}

.token.entity {
    color: #f07178
}

.token.function {
    color: #c792ea
}

.token.hexcode {
    color: #f2ff00
}

.token.id {
    color: #c792ea;
    font-weight: 700
}

.token.important {
    color: #c792ea;
    font-weight: 700
}

.token.inserted {
    color: #80cbc4
}

.token.keyword {
    color: #c792ea;
    font-style: italic
}

.token.number {
    color: #fd9170
}

.token.operator {
    color: #89ddff
}

.token.prolog {
    color: #546e7a
}

.token.property {
    color: #80cbc4
}

.token.pseudo-class {
    color: #c3e88d
}

.token.pseudo-element {
    color: #c3e88d
}

.token.punctuation {
    color: #89ddff
}

.token.regex {
    color: #f2ff00
}

.token.selector {
    color: #f07178
}

.token.string {
    color: #c3e88d
}

.token.symbol {
    color: #c792ea
}

.token.tag {
    color: #f07178
}

.token.unit {
    color: #f07178
}

.token.url {
    color: #fd9170
}

.token.variable {
    color: #f07178
}


div.code-toolbar {
    position: relative
}

    div.code-toolbar > .toolbar {
        position: absolute;
        z-index: 10;
        top: .3em;
        right: .2em;
        transition: opacity .3s ease-in-out;
        opacity: 0
    }

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

    div.code-toolbar:focus-within > .toolbar {
        opacity: 1
    }

    div.code-toolbar > .toolbar > .toolbar-item {
        display: inline-block
    }

        div.code-toolbar > .toolbar > .toolbar-item > a {
            cursor: pointer
        }

        div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span {
            color: inherit;
            font-size: .75em;
            padding: .5em .5em .5em .5em;
            background: transparent;
            box-shadow: 0 2px 0 0 rgba(0,0,0,.2);
            border-radius: 0.3em;
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            background-image: url('./assets/copy\ code-default.svg');
            background-size: contain;
            background-repeat: no-repeat;
            vertical-align: middle;
            transition: all 0.3s ease;
        }

            div.code-toolbar > .toolbar > .toolbar-item > button:hover span::before {
            }

            div.code-toolbar > .toolbar > .toolbar-item > a:focus, div.code-toolbar > .toolbar > .toolbar-item > a:hover, div.code-toolbar > .toolbar > .toolbar-item > button:focus, div.code-toolbar > .toolbar > .toolbar-item > button:hover, div.code-toolbar > .toolbar > .toolbar-item > span:focus, div.code-toolbar > .toolbar > .toolbar-item > span:hover {
                color: inherit;
                text-decoration: none
            }

        div.code-toolbar > .toolbar > .toolbar-item > button {
            background: 0 0;
            border: 0;
            color: black;
            font: inherit;
            line-height: normal;
            overflow: visible;
            padding: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none
        }

            div.code-toolbar > .toolbar > .toolbar-item > button:hover {
                background-color: black;
            }

                div.code-toolbar > .toolbar > .toolbar-item > button:hover span {
                    color: white;
                }

        div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span {
            color: inherit;
            font-size: .75em;
            padding: .5em .5em .5em .5em;
            background: #f5f2f0;
            background: white;
            box-shadow: 0 2px 0 0 rgba(0,0,0,.2);
            border-radius: 0.3em;
            border: 1px solid black;
        }



/* CSS Changes for the copy/copied button*/

.expandible-panel div.code-toolbar > .toolbar .copy-to-clipboard-button::before {
    content: "";
    display: block;
    opacity: 1;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg fill='none' viewBox='0 0 50 46' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='49.222' height='45.815' rx='5' fill='none'/%3E%3Cpath d='m12.833 12.094c0-1.6849 1.4079-3.0936 3.1984-3.0936h20.992c1.7905 0 3.1984 1.4087 3.1984 3.0936v17.739c0 1.6848-1.4079 3.0935-3.1984 3.0935h-20.992c-1.7905 0-3.1984-1.4087-3.1984-3.0935v-17.739z' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='m18.122 21.677c0 0.0374 0.0208 0.0716 0.0541 0.0888l5.2599 2.7178c0.031 0.016 0.0681 0.0147 0.0979-0.0034 0.0298-0.0182 0.048-0.0505 0.048-0.0854v-1.0606c0-0.0382-0.0218-0.0731-0.0561-0.0899l-3.8849-1.8988 3.8849-1.8988c0.0343-0.0167 0.0561-0.0516 0.0561-0.0898v-1.0606c0-0.0349-0.0182-0.0673-0.048-0.0854-0.0298-0.0182-0.0669-0.0195-0.0979-0.0035l-5.2599 2.7178c-0.0333 0.0172-0.0541 0.0515-0.0541 0.0889v0.6629zm10.456-5.874c0.0079-0.03 0.0015-0.062-0.0174-0.0866-0.019-0.0246-0.0482-0.0391-0.0793-0.0391h-0.8821c-0.0453 0-0.085 0.0306-0.0966 0.0744l-2.6954 10.159c-0.0079 0.03-0.0015 0.062 0.0174 0.0866 0.019 0.0246 0.0483 0.0391 0.0793 0.0391h0.8821c0.0454 0 0.085-0.0306 0.0967-0.0744l2.6953-10.159zm6.6293 5.9628c0.0332-0.0172 0.0541-0.0514 0.0541-0.0888v-0.6629c0-0.0374-0.0209-0.0717-0.0541-0.0889l-5.2599-2.7178c-0.031-0.016-0.0681-0.0147-0.098 0.0035-0.0298 0.0181-0.0479 0.0505-0.0479 0.0854v1.0606c0 0.0382 0.0217 0.0731 0.056 0.0898l3.8849 1.8988-3.8849 1.8988c-0.0343 0.0168-0.056 0.0517-0.056 0.0899v1.0606c0 0.0349 0.0181 0.0672 0.0479 0.0854 0.0299 0.0181 0.067 0.0194 0.098 0.0034l5.2599-2.7178z' fill='%23fff' stroke='%23fff' stroke-linejoin='round' stroke-width='.2'/%3E%3Cpath d='m8 17.074v16.852c0 2.1477 1.7162 3.8889 3.8333 3.8889h19.167' stroke='%23fff' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    font-size: 10px;
    background-size: 30px;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.expandible-panel div.code-toolbar > .toolbar {
    opacity: 1;
    transition: opacity .3s ease-in-out;
    z-index: 1;
    top: 0;
}


    .expandible-panel div.code-toolbar > .toolbar .toolbar-item {
        /* opacity: 0; */
        /* visibility: hidden; */
        /* position: absolute; */
        /* right: 31px; */
        /* bottom: -2px; */
    }

    .expandible-panel div.code-toolbar > .toolbar:hover .toolbar-item {
        visibility: visible;
        opacity: 1;
    }


    .expandible-panel div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        color: #fff;
        background-color: transparent;
        border: 0;
        width: unset;
        height: unset;
        position: relative;
        box-shadow: none;
    }


    .expandible-panel div.code-toolbar > .toolbar:hover .copy-to-clipboard-button::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='46' viewBox='0 0 50 46' fill='none'%3E%3Crect width='49.2222' height='45.8148' rx='5' fill='white'/%3E%3Cpath d='M16.0317 9H37.0237C38.8142 9 40.2221 10.4087 40.2221 12.0936V29.8324C40.2221 31.5172 38.8142 32.9259 37.0237 32.9259H16.0317C14.2412 32.9259 12.8333 31.5172 12.8333 29.8324V12.0936C12.8333 10.4087 14.2412 9 16.0317 9Z' stroke='%23263238' stroke-width='2'/%3E%3Cpath d='M18.1222 21.677C18.1222 21.7144 18.143 21.7486 18.1763 21.7658L23.4362 24.4836C23.4672 24.4996 23.5043 24.4983 23.5341 24.4802C23.5639 24.462 23.5821 24.4297 23.5821 24.3948V23.3342C23.5821 23.296 23.5603 23.2611 23.526 23.2443L19.6411 21.3455L23.526 19.4467C23.5603 19.43 23.5821 19.3951 23.5821 19.3569V18.2963C23.5821 18.2614 23.5639 18.229 23.5341 18.2109C23.5043 18.1927 23.4672 18.1914 23.4362 18.2074L18.1763 20.9252C18.143 20.9424 18.1222 20.9767 18.1222 21.0141V21.677ZM28.5784 15.803C28.5863 15.773 28.5799 15.741 28.561 15.7164C28.542 15.6918 28.5128 15.6773 28.4817 15.6773H27.5996C27.5543 15.6773 27.5146 15.7079 27.503 15.7517L24.8076 25.9103C24.7997 25.9403 24.8061 25.9723 24.825 25.9969C24.844 26.0215 24.8733 26.036 24.9043 26.036H25.7864C25.8318 26.036 25.8714 26.0054 25.8831 25.9616L28.5784 15.803ZM35.2077 21.7658C35.2409 21.7486 35.2618 21.7144 35.2618 21.677V21.0141C35.2618 20.9767 35.2409 20.9424 35.2077 20.9252L29.9478 18.2074C29.9168 18.1914 29.8797 18.1927 29.8498 18.2109C29.82 18.229 29.8019 18.2614 29.8019 18.2963V19.3569C29.8019 19.3951 29.8236 19.43 29.8579 19.4467L33.7428 21.3455L29.8579 23.2443C29.8236 23.2611 29.8019 23.296 29.8019 23.3342V24.3948C29.8019 24.4297 29.82 24.462 29.8498 24.4802C29.8797 24.4983 29.9168 24.4996 29.9478 24.4836L35.2077 21.7658Z' fill='%23263238' stroke='%23263238' stroke-width='0.2' stroke-linejoin='round'/%3E%3Cpath d='M8 17.0742V33.9261C8 36.0738 9.71624 37.815 11.8333 37.815H31' stroke='%23263238' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .expandible-panel div.code-toolbar > .toolbar > .toolbar-item > .copy-to-clipboard-button > span {
        display: none;
        margin-right: 5px;
    }

    .expandible-panel div.code-toolbar > .toolbar:hover .copy-to-clipboard-button > span {
        display: block;
    }