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

$checkbox-shadow-size: 3px;

// Custom styling for checkbox inspired by https://codepen.io/GeoffreyCrofte/pen/BiHzp
[type="checkbox"] {
    &:not(:checked),
    &:checked {
        position: absolute;
        left: 0;
        opacity: 0.01;

        + label {
            position: relative;
            cursor: pointer;

            &:before {
                content: "";
                position: absolute;
                left: $checkbox-shadow-size;
                top: 0.2em;
                width: 1em;
                height: 1em;
                border: 1px solid $light-grey;
                background: white;
                border-radius: 2px;
                box-shadow: inset 0 1px $checkbox-shadow-size rgba(0, 0, 0, 0.1), 0 0 0 rgba(97, 143, 224, 0.2);
                transition: all 0.275s;
            }

            &:after {
                content: "✕";
                position: absolute;
                top: 0.8em;
                left: calc(#{$checkbox-shadow-size} + 0.2em);
                font-size: 1em;
                color: $blue;
                line-height: 0;
                transition: all 0.2s;
            }

            .checkbox-text-label {
                margin-left: 1.7em;
            }
        }
    }

    &:not(:checked) {
        + label:after {
            opacity: 0;
            transform: scale(0) rotate(45deg);
        }
    }

    &:checked {
        + label:after {
            opacity: 1;
            transform: scale(1) rotate(0);
        }
    }

    &:disabled:not(:checked),
    &:disabled:checked {
        + label {
            &:before {
                box-shadow: none;
                border-color: $light-grey;
                background-color: $lightest-grey;
            }

            &:after {
                color: $grey;
            }

            .checkbox-text-label {
                color: $light-grey;
            }
        }
    }

    &:disabled {
        color: $light-grey;
    }

    &:checked:focus,
    &:not(:checked):focus {
        + label:before {
            box-shadow: inset 0 1px $checkbox-shadow-size rgba(0, 0, 0, 0.1),
                0 0 0 $checkbox-shadow-size rgba(97, 143, 224, 0.2);
        }
    }
}
