@import "./variables.scss";
@import "./theme-switcher.scss";

.jupyter-wrapper {
    @import "./jupyter-lab-index.scss";

    .jp-DownloadNB {
        // TODO
    }

    table.dataframe {
        table-layout: auto !important;
    }

    // Fix some margin/overflow issues
    .md-typeset__scrollwrap {
        margin: 0;
    }

    // Remove padding from Markdown cells
    .jp-MarkdownOutput {
        padding: 0;
    }

    // Anchor links hide/show
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        .anchor-link {
            display: none;
            margin-left: 0.5rem;
            color: var(--md-default-fg-color--lighter);

            &:hover {
                text-decoration: none;
                color: var(--md-accent-fg-color);
            }
        }

        &:hover {
            .anchor-link {
                display: inline-block;
            }
        }
    }

    .jp-InputArea {
        width: 100%;
    }
    .jp-Cell-inputArea {
        width: 100%;
    }
    .jp-RenderedHTMLCommon {
        width: 100%;
    }

    // Markdown cells: Remove Input prompt
    .jp-Cell-inputWrapper .jp-InputPrompt {
        display: none;
    }

    // Code cells: Show Input prompt
    .jp-CodeCell .jp-Cell-inputWrapper .jp-InputPrompt {
        display: block;
    }

    // Reset cursor to normal on input prompts
    .jp-Cell .jp-InputPrompt {
        cursor: normal;
    }

    // Highlighted pre cells
    .highlight {
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            overflow: auto;
        }
    }

    // Tags on cells
    // Mostly copying this from straight from Jupyter
    .celltoolbar {
        border: none;
        background: #eee;
        border-radius: 2px 2px 0px 0px;
        width: 100%;
        height: 29px;
        padding-right: 4px;
        box-orient: horizontal;
        box-align: stretch;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        box-pack: end;
        justify-content: flex-start;
        display: -webkit-flex;
    }

    .celltoolbar .tags_button_container {
        display: flex;
    }

    .celltoolbar .tags_button_container .tag-container {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        overflow: hidden;
        position: relative;
    }

    .celltoolbar .tags_button_container .tag-container .cell-tag {
        display: inline-flex;
        align-items: center;
        background-color: #fff;
        white-space: nowrap;
        margin: 3px 4px;
        padding: 0 4px;
        border-radius: 1px;
        border: 1px solid #ccc;
        box-shadow: none;
        width: inherit;
        font-size: 11px;
        font-family: "Roboto Mono", SFMono-Regular, Consolas, Menlo, monospace;
        height: 17px;
    }

    //
    .jp-InputArea-editor {
        width: 1px;
    }
    .jp-InputPrompt {
        overflow: unset;
    }
    .jp-OutputPrompt {
        overflow: unset;
    }
    .jp-RenderedText {
        font-size: var(--jp-code-font-size);
    }

    .highlight-ipynb {
        overflow: auto;

        pre {
            margin: 0;
            padding: 5px 10px;
        }
    }

    // // DataFrame
    // // From: https://github.com/jupyter/notebook/blob/master/notebook/static/notebook/less/renderedhtml.less
    table {
        width: max-content;
    }

    table.dataframe {
        margin-left: auto;
        margin-right: auto;
        border: none;
        border-collapse: collapse;
        border-spacing: 0;
        color: black;
        font-size: 12px;
        table-layout: fixed;
        thead {
            border-bottom: 1px solid black;
            vertical-align: bottom;
        }
        tr,
        th,
        td {
            text-align: right;
            vertical-align: middle;
            padding: 0.5em 0.5em;
            line-height: normal;
            white-space: normal;
            max-width: none;
            border: none;
        }
        th {
            font-weight: bold;
        }
        tbody tr:nth-child(odd) {
            background: #f5f5f5;
        }
        tbody tr:hover {
            background: rgba(66, 165, 245, 0.2);
        }
    }
    * + table {
        margin-top: 1em;
    }

    // Clipboard copy

    .jp-InputArea-editor {
        // To make the clipboard button position possible
        position: relative;
    }

    .zeroclipboard-container {
        position: absolute;
        top: -3px;
        right: 0;
        z-index: 1;

        clipboard-copy {
            -webkit-appearance: button;
            -moz-appearance: button;
            padding: 7px 5px;
            font: 11px system-ui, sans-serif;
            display: inline-block;
            cursor: default;
        }

        clipboard-copy:hover {
            cursor: pointer;
        }

        .clipboard-copy-icon {
            width: 15px;
            padding: 2px 0;
            color: rgb(87, 96, 106);
            vertical-align: text-bottom;
        }
    }

    .clipboard-copy-txt {
        display: none;
    }
}

// Material dark theme
[data-md-color-scheme="slate"] {
    .highlight {
        pre {
            background-color: #21222c;
            padding: 10px;
            overflow: auto;
        }
    }

    .clipboard-copy-icon {
        color: #555 !important;
    }

    .celltoolbar {
        background: #333 !important;
    }

    .celltoolbar .tags_button_container .tag-container .cell-tag {
        background-color: transparent !important;
        border: 1px solid #666 !important;
    }

    table.dataframe {
        color: rgb(233, 235, 252);

        thead {
            border-bottom: 1px solid rgba(233, 235, 252, 0.12);
        }
        tbody tr:nth-child(odd) {
            background: #222;
        }
        tbody tr:hover {
            background: rgba(66, 165, 245, 0.2);
        }
    }
}

table {
    width: max-content;
}
