/* @define ChargeHourGoalWidget */

/* stylelint-disable plugin/selector-bem-pattern */
.ChargeHourGoalWidget .WidgetContainer-card {
    min-height: calc(var(--dashboard-widget-height) * 2);
}
/* stylelint-enable plugin/selector-bem-pattern */

.ChargeHourGoalWidget-cardBody {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    height: 100%;
}

.ChargeHourGoalWidget-summaryRow {
    display: flex;
    gap: var(--padding-lg);
    justify-content: space-between;
}

.ChargeHourGoalWidget-summary {
    color: var(--text-default);
}

.ChargeHourGoalWidget-primaryValue {
    font-size: 4rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.ChargeHourGoalWidget-secondaryValue,
.ChargeHourGoalWidget-annualGoal,
.ChargeHourGoalWidget-deltaLabel,
.ChargeHourGoalWidget-legend {
    color: var(--text-subtle);
    font-size: var(--font-size-h3);
}

.ChargeHourGoalWidget-secondaryValue,
.ChargeHourGoalWidget-annualGoal,
.ChargeHourGoalWidget-projectedText,
.ChargeHourGoalWidget-deltaValue,
.ChargeHourGoalWidget-deltaLabel,
.ChargeHourGoalWidget-legend {
    line-height: 1.5;
}

.ChargeHourGoalWidget-projectedText {
    color: var(--surface-data-quatery);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--padding-sm);
}

.ChargeHourGoalWidget-controls {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
}

.ChargeHourGoalWidget-delta {
    text-align: right;
}

.ChargeHourGoalWidget-deltaValue {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
}

.ChargeHourGoalWidget-displayMode {
    border: var(--border-xs) solid var(--surface-accent);
    border-radius: var(--border-radius-lg);
    display: flex;
    overflow: hidden;
}

.ChargeHourGoalWidget-modeButton {
    background: var(--surface-default);
    border: 0;
    border-radius: 0;
    color: var(--text-subtle);
    min-width: 3.875rem;
    padding-inline: var(--padding-sm);
}

.ChargeHourGoalWidget-modeButton--active {
    background: var(--surface-emphasis);
    color: var(--text-inverse);
}

.ChargeHourGoalWidget-chartArea {
    margin-top: var(--padding-xs);
}

.ChargeHourGoalWidget-chartContainer {
    height: 14rem;
    position: relative;
    width: 100%;
}

.ChargeHourGoalWidget-chartCanvas {
    display: block;
    height: 100% !important;
    width: 100% !important;
}

.ChargeHourGoalWidget-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--padding-md);
    justify-content: space-between;
}

.ChargeHourGoalWidget-status,
.ChargeHourGoalWidget-legend,
.ChargeHourGoalWidget-legendItem {
    align-items: center;
    display: flex;
}

.ChargeHourGoalWidget-status {
    gap: var(--padding-xs);
}

.ChargeHourGoalWidget-statusDot {
    background: currentcolor;
    border-radius: var(--border-radius-circle);
    display: inline-block;
    height: 0.75rem;
    width: 0.75rem;
}

.ChargeHourGoalWidget-statusText {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
}

.ChargeHourGoalWidget-legend {
    gap: var(--padding-lg);
}

.ChargeHourGoalWidget-legendItem {
    gap: var(--padding-xs);
}

.ChargeHourGoalWidget-legendLine {
    background: var(--surface-data-quatery);
    border-radius: var(--border-radius-circle);
    display: inline-block;
    height: 0.1875rem;
    width: 1.75rem;
}

.ChargeHourGoalWidget-legendLine--projection {
    background: repeating-linear-gradient(
        to right,
        var(--surface-data-monochromatic-light) 0,
        var(--surface-data-monochromatic-light) 0.5rem,
        transparent 0.5rem,
        transparent 0.875rem
    );
    border-radius: 0;
}

@media (width <= 767.98px) {
    .ChargeHourGoalWidget-summaryRow {
        flex-direction: column;
    }

    .ChargeHourGoalWidget-controls {
        align-items: flex-start;
    }

    .ChargeHourGoalWidget-primaryValue {
        font-size: 3rem;
    }

    .ChargeHourGoalWidget-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}