@layer components {
  .kind {
    --kind-size: var(--row-icon-size);
    --icon-size: var(--input-icon-size);

    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--kind-size);
    block-size: var(--kind-size);
    border-radius: var(--radius-sm);
    background-color: var(--color-chip);
    color: var(--color-ink-muted);
  }

  .kind--large {
    --kind-size: var(--tap-min);
    --icon-size: var(--button-icon-size-large);

    border-radius: var(--radius-md);
  }

  .kind--conversations {
    color: var(--color-guide);
  }

  .kind--moments {
    background-color: var(--color-done-soft);
    color: var(--color-done);
  }

  .kind--person {
    background-color: var(--color-participant);
    color: var(--color-participant-ink);
  }
}