@layer components {
  .provider-calls {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
  }

  .provider-calls__call {
    justify-content: start;
    gap: var(--space-4);
    padding-inline: var(--space-6);
    color: var(--color-accent-ink);
    font: var(--type-heading);
  }

  .provider-calls__words {
    flex: auto;
    text-align: start;
  }

  .provider-calls__number {
    font: var(--type-body-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-muted);
  }

  .provider-calls__note {
    font: var(--type-body);
    color: var(--color-ink);
    text-wrap: pretty;
  }

  .provider-calls__ways {
    display: flex;
    flex-direction: column;
  }

  .provider-calls > .add-record > .button {
    align-self: start;
  }
}