@scope (.cost-ledgers) {
  .cost-ledgers__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
  }

  .cost-ledgers__add.button {
    display: none;
  }

  :scope:has(#cost-ledgers-panel-service.tabs__panel--active) .cost-ledgers__add.button[data-ledger="service"],
  :scope:has(#cost-ledgers-panel-factory.tabs__panel--active) .cost-ledgers__add.button[data-ledger="factory"],
  :scope:has(#cost-ledgers-panel-costs.tabs__panel--active) .cost-ledgers__add.button[data-ledger="costs"],
  :scope:has(#cost-ledgers-panel-commissions.tabs__panel--active) .cost-ledgers__add.button[data-ledger="commissions"] {
    display: inline-flex;
  }

  .cost-ledgers__count {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    line-height: 1;
  }

  .tabs__tab--active .cost-ledgers__count {
    color: inherit;
  }

  .cost-ledgers__count--empty {
    font-weight: var(--font-medium);
    opacity: 0.55;
  }
}