json-viewer {
    padding: 0 15px;
    max-height: 600px;
    overflow: auto;
    scrollbar-width: thin;

    /* Background, font and indentation */
    --background-color: #2a2f3a;
    --color: #f8f8f2;
    --font-family: inherit;
    /*--font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;*/
    --font-size: 10pt;
    --line-height: inherit;
    --indent-size: 20px;
    --indentguide-size: 1px;
    --indentguide-style: solid;
    --indentguide-color: #333;
    --indentguide-color-active: #666;
    --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);
    --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);
    --outline-color: #e0e4e5;
    --outline-width: 1px;
    --outline-style: dotted;

    /* Types colors */
    --string-color: #a3eea0;
    --number-color: #d19a66;
    --boolean-color: #4ba7ef;
    --null-color: #df9cf3;
    --property-color: #6fb3d2;

    /* Collapsed node preview */
    --preview-color: #deae8f;

    /* Search highlight color */
    --highlight-color:  #c92a2a;
}

slide-show {
    display: table;
    cursor: pointer;
    width: 100%;
    height: 100%;
    min-width: 100px;
    min-height: 80px;
    
    &.empty {
        cursor: unset;
        min-height: unset;
    }
}

.slide-show-dialog {
    width: 80vw;
    height: 80vh;
    background-color: #fff;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    cursor: default;
    border: 0;
    border-radius: 20px;
    display: flex;
    gap: 20px;

    &::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    main {
        flex: 2 80%;
        position: relative;
        
        img {
            width: 100%;
            height: 100%;
            object-fit: scale-down;
        }
        
        .info {
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 3px 6px;
            border-top-right-radius: 5px;
            font-size: 10pt;
            cursor: auto;
        }
    }

    aside {
        flex: 1 150px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: auto;
        scrollbar-width: thin;
        
        img {
            border-radius: 10px;
            cursor: pointer;
        }
    }
}