@use '../abstracts/variables' as *;

.bar-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: $radius-xl;
    padding: $space-5;
}

.bar-list__title {
    font-size: $font-sm;
    font-weight: 500;
    color: var(--color-text-primary);
}

.bar-list__empty {
    margin-top: $space-3;
    font-size: $font-sm;
    color: var(--color-text-muted);
}

.bar-list__items {
    margin-top: $space-4;
    display: flex;
    flex-direction: column;
    gap: $space-3;
}

.bar-list__row-head {
    margin-bottom: $space-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $font-xs;
}

.bar-list__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.bar-list__value {
    margin-left: $space-2;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.bar-list__track {
    height: 0.875rem;
    width: 100%;
    border-radius: $radius-full;
    background: var(--color-surface-muted);
}

.bar-list__fill {
    height: 0.875rem;
    border-radius: 0 $radius-full $radius-full 0;
    background: var(--series-1, var(--color-accent));
    transition: filter 100ms;
}

.bar-list__row:hover .bar-list__fill,
.bar-list__row:focus-within .bar-list__fill {
    filter: brightness(1.1);
}