src/aequitas/flow/plots/pareto/js/src/components/Card/Card.scss
/**
 * The copyright of this file belongs to Feedzai. The file cannot be reproduced in whole or in part,
 * stored in a retrieval system, transmitted in any form, or by any means electronic, mechanical, photocopying,
 * or otherwise, without the prior permission of the owner.
 *
 * © 2021 Feedzai, Strictly Confidential
 */

@import "~/constants/_colors";
@import "~/constants/_sizes";
@import "~/constants/_text";

$badge-width: $cell-width - 4px;

.badge {
    background-color: $light-grey;
    color: white;
    text-transform: capitalize;
    border-radius: 3px;
    padding: 3px 3px;
    margin: 6px 2px !important;
    max-width: $badge-width;
    width: $badge-width;
    min-width: $badge-width;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 10px !important;
}

.helper-icon {
    font-size: 14px;
    vertical-align: middle;
    cursor: pointer;
}

.scroll-icon {
    position: absolute;
    bottom: 10px;
    right: calc(50% - 4px);
    margin: 0px;
    background-color: white;
}

.card-models-stats {
    position: relative;
    width: auto;
    margin-left: 20px;
    padding: 10px 5px 30px 5px;
    height: $scatterplot-size;

    h1 {
        font-size: 14px !important;
        margin: 2px;
    }
}

.stats-table-wrapper {
    overflow-y: auto;
    height: 100%;
    padding: 0 10px;

    &::-webkit-scrollbar:horizontal {
        display: none;
    }
}

.scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.unselect-button {
    background: none !important;
    border: none;
    padding: 0 !important;
    margin-bottom: 5px;
    text-decoration: underline;
    cursor: pointer;
    color: $light-grey;
    font-size: 11px;

    &:hover,
    :focus {
        color: $grey;
    }
}

/* We need to add the !important property in order for these styles not to be
overridden by the JupyterLab default stylings for tables. */
.stats-table {
    font-size: 12px !important;
    table-layout: fixed;

    td {
        width: $cell-width !important;
        max-width: $cell-width !important;
        min-width: $cell-width !important;
        font-family: $font-stack !important;
        text-align: left !important;
        background-color: white !important;
        color: $dark-grey;
        border-left: white solid 1px;
        padding: 0.3em 0.3em;
    }

    thead {
        border-width: 0px !important;

        td {
            text-align: center !important;
            vertical-align: bottom;
            height: 80px !important;
            padding-top: 0px;

            h2 {
                text-align: center;
                margin-bottom: 5px;
                margin-top: 2px;
            }
        }
    }

    tbody {
        .metrics-row {
            padding: 0;
        }
        .metrics-row:hover td {
            background-color: $lightest-grey !important;
            opacity: 1;
        }

        .metrics-row-title {
            min-width: 110px !important;
            word-wrap: break-word;
        }

        .title {
            td {
                color: $light-grey !important;
                font-size: 12px;
            }
        }

        .spacer {
            height: 8px;
        }

        .value {
            text-align: right !important;
            border-left: $lighter-grey solid 1px;
            padding-right: 10px;
        }

        .missing {
            color: $lighter-grey !important;
            font-weight: lighter;
        }

        .chart-cell {
            min-width: 110px !important;
            padding: 0;

            .chart-wrapper {
                height: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                flex: 100%;
            }

            .reference-line {
                stroke: $light-grey;
            }

            span {
                width: 4em;
            }
        }
    }
}
