@layer components {
  .chart__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--block-space);
  }

  .chart__title {
    font-size: var(--text-body);
    font-weight: 600;
    margin: 0;
  }

  .chart__filters {
    display: flex;
    gap: var(--inline-space-half);
  }

  .chart__container {
    height: var(--chart-height);
    position: relative;
  }

  .chart__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--block-space);
    padding-top: var(--block-space);
    border-top: 1px solid var(--color-border);
  }

  .chart__total {
    font-size: var(--text-footnote);
    color: var(--color-ink-light);
  }
}