$table-border-color: #3da3da; //#2e79a2
$table-info-header-bg-color: #2e79a2;
$table-data-header-bg-color: #525252;

output-pane {
    outline: none;

    &:hover {
        .nav-controls {
            display: flex;
        }
    }

    .dump-container-wrapper {
        $font-size: 13px;

        padding: 0.25rem;
        line-height: 1;
        overflow-x: auto;
        flex-grow: 1;

        &:focus {
            outline: none;
        }

        &.text-wrap {
            overflow-wrap: break-word;
        }

        /*
        * CSS for generated HTML
        */
        hr {
            color: dodgerblue;
            margin: 0 0 10px;
        }

        %null,
        .null {
            color: #797e81;
        }

        .cyclic-reference {
            font-style: italic;
            font-size: $font-size - 1;
            color: red;
        }

        .max-depth-reached {
            font-style: italic;
            font-size: $font-size - 1;
            color: orange;
        }

        .empty-collection {
            color: white;
            background-color: $table-info-header-bg-color;
            padding: 0.25rem 0.2rem;
            display: inline-block;
        }

        .group {
            padding: 0.25rem;
            border-left: 2px transparent solid;

            &.text:not(.raw,.error,.code) {
                padding-top: 0;
            }

            &.raw {
                padding: 1rem 0.75rem;
                background: rgb(128 128 128 / 10%);
                border-left: #949494 2px dashed;

                &:hover {
                    background: rgb(128 128 128 / 20%);
                }
            }

            &.error {
                padding: 1.25rem 0.75rem;
                color: red;
                background: rgba(250 128 114 / 6%);
                border-left: red 2px solid;

                &:hover {
                    background: rgba(250 128 114 / 10%);
                }
            }

            &.code {
                pre {
                    margin: 0;
                    font-size: inherit;
                    padding-top: 0.25rem;
                    padding-bottom: 0.25rem;
                }
            }

            &.image,
            &.video,
            &.audio {
                margin-top: 1rem;
                margin-bottom: 1rem;
                padding: 0.5rem;

                &:hover {
                    background: rgb(128 128 128 / 10%);
                }
            }

            &.audio {
                audio {
                    width: 35%;
                }
            }

            &.titled {
                border-left: 2px orange solid;
                margin-top: 0.5rem;
                margin-bottom: 1rem;

                &.collapsed {
                    .title {
                        border-bottom: 2px greenyellow dotted;
                    }

                    :not(.title) {
                        display: none;
                    }
                }
            }
        }

        .title {
            width: fit-content;
            padding-right: 8px;
            padding-bottom: 1px;
            border-bottom: 2px dodgerblue dotted;
        }

        table {
            width: initial;
            margin: 5px 0;
            border-color: $table-border-color;
            color: inherit;

            &.collapsed > tbody,
            &.collapsed > thead > .table-data-header {
                display: none;
            }

            table {
                margin: 0;
            }

            th {
                font-weight: 600;
                line-height: 1;
                padding: 3px 5px;
                color: white;
                background-color: $table-data-header-bg-color;

                a {
                    color: white;
                }
            }

            thead th {
                white-space: nowrap;
            }

            .table-info-header > th {
                background-color: $table-info-header-bg-color;
                border-color: $table-info-header-bg-color;
                border-top-width: 1px;
            }

            .table-data-header {
                position: sticky !important;
                top: -3px;
            }

            .table-info-header + .table-data-header {
                top: -4px; // An extra -1 to account for border of info header
            }

            td > table {
                margin: 3px !important;
            }

            tbody td {
                overflow-wrap: break-word;
            }

            tbody {
                border-top-width: 0;
            }

            .property-name {
                font-weight: 600;
            }

            .collapse-actionable {
                cursor: pointer;
            }
        }
    }

    .dump-container {
        min-height: 100%;
    }
}

.theme-netpad-light output-view table.table tr:not(.table-info-header) th {
    color: black;
    background-color: #dcdcdc;
}
