.ga-activity {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 18px;
}

.ga-activity-bar {
    flex: 1;
    min-width: 4px;
    height: 100%;
    border-radius: var(--ga-radius-sm);
    transition:
        opacity var(--ga-transition-fast),
        transform var(--ga-transition-fast);
}

.ga-activity-green {
    background: var(--ga-color-success);
}

.ga-activity-orange {
    background: var(--ga-color-success);
}

.ga-activity-show-orange .ga-activity-orange {
    background: var(--ga-color-warning);
}

.ga-activity-red {
    background: var(--ga-color-danger);
}

.ga-activity-gray {
    background: var(--ga-color-border);
}

.ga-activity-bar:hover {
    opacity: .85;
    transform: scaleY(1.15);
}