$border-thickness: 10px;
$top-bezel-thickness: 1rem;


.code-snippet-output{
    position: relative;
    width: 100%;
    // height: 500px;
    border: $border-thickness var(--code-snippet-border-color) solid;
    // border: none;
}


code.iframe-code-snippet, code.simple-code-snippet{
    width: 100%;
    display: block;
    overflow: hidden;
    padding: var(--border-radius) 0 0 0;
    margin: 1rem 0;
    padding-top: $top-bezel-thickness;
    position: relative;

    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: $top-bezel-thickness;
        width: 100%;
        background: var(--code-snippet-border-color);
        z-index: 1;
    }
}

.simple-snippet{
    padding: 1rem;
    // border: $border-thickness var(--code-snippet-border-color) solid;
}

// .code_snippet{
//     width: 100%;
//     white-space: nowrap;
//     overflow: auto;
//     padding: 1.5rem;
// }

.hljs{
    background-color: var(--off-background);
    color: var(--text-color);
    position: relative;
}

.hljs-tag{
    color: var(--color-royal-blue);
}

.hljs-name{
    font-weight: var(--font-normal-weight);
    color: var(--color-royal-blue) !important;
}

.hljs-attr{
    color: var(--color-desire-red) !important;
}

.hljs-string{
    color: var(--accent-color) !important;
}

.hljs-comment{
    color: var(--color-silver-grey);
}

.hljs-keyword{
    font-weight: var(--font-normal-weight);
    color: teal !important;
    font-style: oblique;
}

.hljs-number{
    color: var(--color-concentrated-orange);
}

.hljs-title{
    color: var(--color-royal-blue);
    font-weight: var(--font-normal-weight);
}

.hljs-params{
    color: var(--accent-color);
}

.hljs-variable{
    color: var(--color-desire-red);
}

.hljs-property{
    color: var(--color-shade-green);
}

.hljs-selector-tag{
    font-weight: var(--font-normal-weight);
    color: teal;
}

.hljs-attribute{
    color: var(--color-desire-red);
    font-weight: var(--font-normal-weight);
}

.hljs-built_in{
    color: var(--accent-colors);
}

// copy button
.copyButton{
    position: absolute;
    top: 0;
    right: 0;
    height: 2rem;
}

.code-demo{
    margin-top: 4rem;
}

.code_snippet{
    position: relative;
    background-color: aqua;

    pre{
        font-size: 0;
    }
    
    code{
        font-size: var(--defualt-size);
    }
}

.codeCopyTextArea{
    display: none;
}