import { style } from '@vanilla-extract/css';

import { colors } from '#/styles/colors';
import { borderRadius, iconSize, space } from '#/styles/tokens.css';

const avatarSize = 40;

export const row = style({
	boxSizing: 'border-box',
	display: 'flex',
	gap: space.md,
	alignItems: 'center',
	padding: space.lg,
	width: '100%',
	textAlign: 'start',
	selectors: {
		'&:not(:last-child)': { borderBottom: `1px solid ${colors.borderContrastLow}` },
	},
});

export const rowInteractive = style({
	appearance: 'none',
	border: 'none',
	background: 'none',
	color: colors.text,
	font: 'inherit',
	cursor: 'pointer',
	selectors: {
		'&:hover': { backgroundColor: colors.contrast_25 },
	},
});

export const addAvatar = style({
	display: 'flex',
	flexShrink: 0,
	alignItems: 'center',
	justifyContent: 'center',
	borderRadius: borderRadius.full,
	backgroundColor: colors.contrast_25,
	width: avatarSize,
	height: avatarSize,
	color: colors.textContrastLow,
	selectors: {
		[`${rowInteractive}:hover &`]: { backgroundColor: colors.contrast_50 },
	},
});

export const addLabel = style({
	flex: 1,
	minWidth: 0,
});

export const check = style({
	display: 'flex',
	flexShrink: 0,
	alignItems: 'center',
	justifyContent: 'center',
	borderRadius: borderRadius.full,
	backgroundColor: colors.positive_500,
	width: 20,
	height: 20,
	color: colors.white,
});

export const chevron = style({
	width: iconSize.lg,
	height: iconSize.lg,
	color: colors.textContrastLow,
	flexShrink: 0,
});

export const container = style({
	display: 'flex',
	flexDirection: 'column',
	border: `1px solid ${colors.borderContrastLow}`,
	borderRadius: borderRadius.lg,
	overflow: 'hidden',
});

export const rowActive = style({
	backgroundColor: colors.contrast_25,
});

export const addIcon = style({
	width: iconSize.lg,
	height: iconSize.lg,
});

export const checkIcon = style({
	width: iconSize.xs,
	height: iconSize.xs,
});