src/aequitas/flow/plots/pareto/js/src/components/Tooltip/Tooltip.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";

.tooltip {
    min-width: min-content;
    width: auto;
    height: auto;
    padding: 5px 10px;
    color: $dark-grey;

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

    h2 {
        padding-left: 10px;
    }

    .content {
        font-size: 12px;
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 10px;
        justify-items: start;
        justify-content: start;

        &.pinned {
            grid-template-columns: auto auto;
        }
    }

    .row {
        display: flex;
        flex-direction: row;
        align-items: baseline;
    }

    button {
        border: 1px $dark-grey solid;
        font-size: 12px;
        display: flex;
        width: max-content;
        margin: auto;
        margin-top: 5px;
        padding: 0.3em 0.4em;
        background-color: white;
        cursor: pointer;
        border-radius: 0.1em;
        color: $dark-grey;
        text-align: center;
        outline: none;
        text-decoration: none;
        transition: background-color 0.2s ease-out, color 0.2s ease-out;

        &:hover,
        &:active {
            text-decoration: none;
            background-color: $dark-grey;
            color: white;
            transition: background-color 0.3s ease-in, color 0.3s ease-in;
        }

        &.unpin {
            background: $dark-grey;
            color: white;

            &:hover,
            &:active {
                background-color: transparent;
                color: $dark-grey;
            }
        }
    }
}
