/* Copyright (C) 2016 NooBaa */

chart-legend {
    display: block;
    min-width: 255px;
    color: rgb(var(--color17));

    .legend-caption {
        margin-bottom: @gutter/2;
    }

    .legend-item {
        margin: @gutter/2 0;
        line-height: 1;
        font-size: @font-size1;
        display: flex;
        flex-direction: row;

        &::before {
            content: '';
            display: inline-block;;
            border: 4px solid;
            vertical-align: middle;
            border-color: inherit;
            margin-right: 4px;
            height: 0;
            width: 0;
            align-self: center;
        }

        .legend-label {
            display: inline-block;
            flex-basis: 150px;
            font-weight: @font-regular;
        }

        .legend-value {
            text-align: right;
            display: inline-block;
            flex-grow: 1;
        }

        &.toggable {
            cursor: pointer;;
        }

        &.disabled{
            color: rgb(var(--color17));
            opacity: .3;

            &::before {
                border-width: 1px;
                width: 6px;
                height: 6px;
            }
        }
    }

    &.disabled {
        opacity: .3;

        .legend-label {
            color: rgb(var(--color09));
        }
    }

    &.legend-row {
        width: auto;

        .legend-items {
            .content-middle();
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .legend-item {
            display: block;
            margin-right: @gutter/4;
            margin-bottom: @gutter/4;
        }

        .legend-value {
            margin-left: @gutter/2;
            margin-right: @gutter;
        }

        .legend-label, .legend-value {
            width: auto;
        }
    }
}
