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

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

export const button = recipe(
	{
		base: {
			appearance: 'none',
			boxSizing: 'border-box',
			display: 'flex',
			flexDirection: 'row',
			alignItems: 'center',
			justifyContent: 'flex-start',
			width: '100%',
			padding: space.lg,
			gap: space.md,
			border: 'none',
			background: 'transparent',
			textAlign: 'left',
			cursor: 'pointer',
			':hover': {
				backgroundColor: colors.contrast_25,
			},
		},
		variants: {
			borderTop: {
				true: {
					borderTop: `1px solid ${colors.borderContrastLow}`,
				},
			},
		},
	},
	{ debugId: 'button' },
);

export const iconBox = style({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	width: 36,
	height: 36,
	marginRight: space.md,
	flexShrink: 0,
	borderRadius: borderRadius.sm,
	backgroundColor: colors.contrast_25,
});

export const textContent = style({
	display: 'flex',
	flexDirection: 'column',
	flex: 1,
	minWidth: 0,
});

export const titleText = style({
	overflow: 'hidden',
	textOverflow: 'ellipsis',
	whiteSpace: 'nowrap',
	fontStyle: 'italic',
});

export const profileRow = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'flex-start',
	width: '100%',
});

export const italic = style({
	fontStyle: 'italic',
});

export const labelSpaced = style({
	marginTop: space.md,
});

export const notice = style({
	display: 'block',
	width: '100%',
	fontStyle: 'italic',
});

export const warningIcon = style({
	width: iconSize.xl,
	height: iconSize.xl,
	color: colors.primary_500,
});