import { style } from '@vanilla-extract/css';
import { color, toRem } from 'folds';

// Create-community leading icon slot. Same 40px width as `SpaceAvatar`
// below so the text columns line up, but NO background / radius — the
// `+` reads as a plain icon at the start of the row, not as a chip.
// Every earlier «colour the chip somehow» iteration (Surface.Container,
// Primary.Container, Primary.Main, Primary.MainHover, transparent-
// inheriting-row-hover) read as «yet another tile that stands out» —
// the chip itself was the regression. Stripped to icon-only.
export const CreateCommunityTile = style({
  width: toRem(40),
  height: toRem(40),
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  flexShrink: 0,
  color: color.Background.OnContainer,
});
