
.gauge {
    .gauge-text {
        fill: @text-color;
    }

    // generates variants
    &.gauge-default {
        .gauge-variant(@gray);
    }
    &.gauge-primary {
        .gauge-variant(@brand-primary);
    }
    &.gauge-success {
        .gauge-variant(@brand-success);
    }
    &.gauge-warning {
        .gauge-variant(@brand-warning);
    }
    &.gauge-danger {
        .gauge-variant(@brand-danger);
    }
    &.gauge-info {
        .gauge-variant(@brand-info);
    }
    &.gauge-user {
        .gauge-variant(@brand-secondary);
    }
}

.count-gauge {
    .gauge-text {
        font-weight: 900;
    }
}

.liquid-gauge {
    .gauge-text {
        font-weight: 900;
    }

    // generates variants
    &.gauge-default {
        .liquid-gauge-variant(@gray);
    }
    &.gauge-primary {
        .liquid-gauge-variant(@brand-primary);
    }
    &.gauge-success {
        .liquid-gauge-variant(@brand-success);
    }
    &.gauge-warning {
        .liquid-gauge-variant(@brand-warning);
    }
    &.gauge-danger {
        .liquid-gauge-variant(@brand-danger);
    }
    &.gauge-info {
        .liquid-gauge-variant(@brand-info);
    }
    &.gauge-user {
        .liquid-gauge-variant(@brand-secondary);
    }
}

.score-gauge {
    // generates variants
    &.gauge-default {
        .score-gauge-variant(@gray);
    }
    &.gauge-primary {
        .score-gauge-variant(@brand-primary);
    }
    &.gauge-success {
        .score-gauge-variant(@brand-success);
    }
    &.gauge-warning {
        .score-gauge-variant(@brand-warning);
    }
    &.gauge-danger {
        .score-gauge-variant(@brand-danger);
    }
    &.gauge-info {
        .score-gauge-variant(@brand-info);
    }
    &.gauge-user {
        .score-gauge-variant(@brand-secondary);
    }
}

// mixin
.gauge-variant(@color) {
    .gauge-text {
        fill: @color;
    }

    .gauge-border-filled {
        fill: @color;
    }

    .gauge-border-empty  {
        fill: transparent;
    }
}

.liquid-gauge-variant(@color, @liquid-opacity: .3) {
    .gauge-liquid {
        fill: @color;
        fill-opacity: @liquid-opacity;
    }

    .gauge-liquid-text {
        fill: @color;
    }
}

.score-gauge-variant(@color) {
    .gauge-value {
        circle {
            fill: lighten(@color, 50%);
        }
    }

    .gauge-total {
        circle {
            fill: @color;
        }

        .gauge-text {
            font-weight: 900;
            fill: white;
        }
    }
}
