@use '../../../global/globalCssVariables.module.scss' as global;
.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    margin-top: 30px;
    overflow-y: visible;

    .graph {
        overflow: visible;
    }
    .graph-title {
        align-items: center;
        font-size: larger;
        display: flex;
        flex-direction: row;
        margin-top: -35px;
    }
    .asHistogram-checkBox {
        margin-left: 10px;
        margin-bottom: -10px;
        margin-top: -20px;
    }
    .selected-data {
        align-items: center;
        text-align: center;
        display: flex;
        flex-direction: row;
        margin: 10px;
        margin-top: -25px;
        margin-bottom: 5px;
    }
    .slice {
        &.hover {
            stroke: black;
            stroke-width: 2px;
        }
    }

    .histogram-bar {
        outline: thin solid black;
        &.hover {
            outline: 3px solid black;
            outline-offset: -3px;
        }
    }

    .tooltip {
        // make the height width bigger
        width: fit-content;
        height: fit-content;
    }

    .hoverHighlight-selected,
    .selected {
        // change the color of the circle element to be red
        fill: transparent;
        outline: red solid 2px;
        border-radius: 100%;
        position: absolute;
        transform-box: fill-box;
        transform-origin: center;
    }
    .hoverHighlight {
        fill: transparent;
        outline: black solid 1px;
        border-radius: 100%;
    }
    .hoverHighlight-selected {
        fill: transparent;
        scale: 1;
        outline: black solid 1px;
        border-radius: 100%;
    }
    .datapoint {
        fill: black;
    }
    .brushed {
        // change the color of the circle element to be red
        fill: red;
    }
}
.tableBox {
    display: flex;
    flex-direction: column;
    cursor: default;
    height: calc(100% - 40px); // bcz: hack 40px is the size of the button rows
    .tableBox-container {
        overflow: scroll;
        margin: 5px;
        margin-left: 25px;
        margin-right: 10px;
        margin-bottom: 0px;
        .tableBox-table {
            height: 100%;
            width: 100%;
            .tableBox-row {
                cursor: pointer;
                .tableBox-cell {
                    text-overflow: ellipsis;
                    width: 100%;
                    white-space: pre;
                    max-width: 150px;
                    overflow: hidden;
                    margin-left: 2px;
                }
            }
        }
        tr td {
            height: global.$DATA_VIZ_TABLE_ROW_HEIGHT !important; // bcz: hack.  you can't set a <tr> height directly, but you can set the height of all of it's <td>s.  So this is the height of a tableBox row.
            padding: 0 !important;
            vertical-align: middle !important;
        }
    }
}
.tableBox-selectButtons {
    margin-top: 5px;
    margin-left: 25px;
    display: inline-block;
    padding: 2px;
    .tableBox-selectTitle {
        display: inline-flex;
        flex-direction: row;
    }
    .tableBox-filtering {
        display: flex;
        flex-direction: row;
        float: right;
        margin-right: 10px;
        .tableBox-filterAll {
            min-width: 75px;
        }
    }
}

.tableBox-filterPopup {
    background: global.$light-gray;
    position: absolute;
    min-width: 235px;
    top: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
    padding: 7px;
    border-radius: 5px;
    margin: 3px;
    .tableBox-filterPopup-selectColumn {
        margin-top: 5px;
        flex-direction: row;
        .tableBox-filterPopup-selectColumn-each {
            margin-left: 25px;
            border-radius: 3px;
            background: global.$light-gray;
        }
    }
    .tableBox-filterPopup-setValue {
        margin-top: 5px;
        display: flex;
        flex-direction: row;
        .tableBox-filterPopup-setValue-each {
            margin-right: 5px;
            border-radius: 3px;
            background: global.$light-gray;
        }
        .tableBox-filterPopup-setValue-input {
            margin: 5px;
        }
    }
    .tableBox-filterPopup-setFilter {
        margin-top: 5px;
        align-self: center;
    }
}