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

.scatterplot {
    display: flex;
    flex-direction: column;
    width: auto;
}

.scatterplot-wrapper {
    margin-top: 10px;
    width: $scatterplot-size;
    height: $scatterplot-size - 10;
}

.scatterplot-slider-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: left;
    height: auto;
}

.y-axis-slider {
    margin-top: 20px;
}

.x-axis-slider {
    margin-left: 70px;
}

.dropdown-fairness {
    margin-left: 100px;
}

// Axis
.axis {
    text {
        fill: $grey;
        user-select: none;
    }

    line {
        stroke: $grey;
    }
}

.axis-title {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    font-size: 12px;

    &.bottom {
        justify-content: center;
        margin-left: 75px;
    }
    &.left {
        margin-left: 40px;
    }

    h4 {
        font-weight: 400;
        font-size: 14px;
    }
}

.axis-select {
    width: 50%;
    margin-left: 10px;
    margin-right: 10px;
}

.axis-gridlines {
    line {
        stroke: $light-grey;
        stroke-dasharray: 3, 5;
        stroke-opacity: 0.3;
    }
}