/* Debug tool */
.debug-wrapper {
    position: fixed;
    bottom: 2rem;
    inset-inline-end: .5rem;
    padding: .5rem 5px;
    z-index: 1000;
    overflow-y: auto;
    max-height: calc(var(--viewport-height) - 2rem);
}

.debug-tool {
    --dt-w: 350px;
    --dt-h-min: 50px;
    --dt-h-max: 250px;
    transition: 1s height linear, 1s width linear;
    background: var(--main-color);
    width: var(--dt-w);
    max-width: var(--dt-w);
    opacity: .95;
    overflow: hidden;
    margin: 0 auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--border2-color);
    outline: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    margin-bottom: .5rem;
}

.debug-tool>.title i {
    cursor: pointer;
    float: right;
    margin-top: 3px;
}

.debug-tool>.title {
    background-color: var(--main3-color);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), var(--particles-image-bg), linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
    padding: .3rem .7rem;
    color: var(--font-hover-color);
    font-weight: 700;
    /* text-shadow: 0 0 3px rgba(250, 250, 250, .1); */
    border-bottom: 1px solid var(--border-color);
}

.debug-tool>pre {
    font-size: var(--size-10);
    padding: .3rem;
    width: 100%;
    width: var(--dt-w);
    max-width: var(--dt-w);
    min-height: var(--dt-h-min);
    max-height: var(--dt-h-max);
    margin: 0;
    overflow: auto;
    border-top: 1px solid var(--border2-color);
}

.debug-tool>pre:not(:last-child){
    border-bottom: 1px solid var(--border-color);
}

.debug-tool>pre::-webkit-scrollbar-track {
    background-color: var(--main2-color);
}

.debug-tool>pre::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: var(--main3-color);
}

.debug-tool>pre::-webkit-scrollbar-thumb {
    background-color: var(--main3-color);
}

.debug-tool>.file-info {
    /* margin-top: .5rem; */
    padding: .5rem;
    font-size: var(--size-10);
    border-top: 1px solid var(--border2-color);
}

.debug-tool.expand>pre {
    height: 400px !important;
    max-height: 400px !important;
}

.debug-tool.expand {
    width: 60% !important;
    max-width: 60% !important;
}


/* error container */

.error-container {
    --error-accent-color: #d9534f;
    max-width: 800px;
    margin: 1rem auto;
    padding: 1rem;
    background-color: var(--main-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-panel);
    border-inline-start: 5px solid var(--error-accent-color);
}

.error-title {
    color: var(--error-accent-color);
    margin-top: 0;
    border-bottom: 1px solid var(--border2-color);
}

.error-details p {
    margin: 5px 0;
}