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

import { colorMix } from '#/styles/color-mix';
import { colors } from '#/styles/colors';
import { vars } from '#/styles/contract.css';
import { recipe } from '#/styles/recipe';
import { space } from '#/styles/tokens.css';

import { OUTER_SPACE, REPLY_LINE_WIDTH } from './PostLayout.const';

export const frame = recipe(
	{
		base: {
			boxSizing: 'border-box',
			display: 'flex',
			position: 'relative',
			flexDirection: 'column',
			paddingInline: OUTER_SPACE,
		},
		variants: {
			hoverable: {
				true: {
					cursor: 'pointer',
					selectors: {
						'&:hover': {
							backgroundColor: colorMix(colors.contrast_50, vars.opacity.hover),
						},
					},
				},
			},
			rootPad: { true: { paddingTop: space.lg } },
			topBorder: {
				true: {
					borderTopWidth: 1,
					borderTopStyle: 'solid',
					borderTopColor: colors.borderContrastLow,
				},
			},
		},
	},
	{ debugId: 'frame' },
);

export const row = style({
	boxSizing: 'border-box',
	display: 'flex',
	position: 'relative',
	flexDirection: 'row',
	gap: space.md,
});

export const avatarColumn = style({
	boxSizing: 'border-box',
	display: 'flex',
	flexDirection: 'column',
	flexShrink: 0,
	alignItems: 'center',
});

export const content = style({
	boxSizing: 'border-box',
	display: 'flex',
	flex: 1,
	flexDirection: 'column',
	paddingBottom: space.md,
	minWidth: 0,
});

export const spine = style({
	flexGrow: 1,
	marginInline: 'auto',
	backgroundColor: colors.borderContrastLow,
	width: REPLY_LINE_WIDTH,
	selectors: {
		'.theme--dark &, .theme--dim &': {
			backgroundColor: colors.borderContrastMedium,
		},
	},
});