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

import { vars } from '#/styles/contract.css';
import { iconSize } from '#/styles/tokens.css';

export const root = style({
	display: 'flex',
	flexDirection: 'row',
	gap: 12,
	alignItems: 'center',
	justifyContent: 'space-between',
	paddingTop: 12,
});

export const primaryGroup = style({
	display: 'flex',
	flex: 1,
	flexDirection: 'row',
});

export const primaryItem = style({
	display: 'flex',
	flex: 1,
	flexDirection: 'column',
	alignItems: 'flex-start',
});

export const replyDisabled = style({ opacity: 0.6 });

export const secondaryGroup = style({
	display: 'flex',
	flexDirection: 'row',
	gap: 16,
	justifyContent: 'flex-end',
});

export const button = style({
	appearance: 'none',
	display: 'inline-flex',
	gap: 4,
	alignItems: 'center',
	transitionDuration: '100ms',
	transitionProperty: 'color',
	transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
	border: 'none',
	backgroundColor: 'transparent',
	padding: 0,
	color: vars.palette.contrast_500,
	fontFamily: 'inherit',
	cursor: 'pointer',
	selectors: {
		'&:focus-visible': { outline: 'none' },
		'&:disabled': { opacity: 0.6, cursor: 'default' },
	},
});

export const ICON_SIZE = 18;
export const ICON_CIRCLE_SIZE = 32;

export const iconCircle = style({
	display: 'inline-flex',
	flexShrink: 0,
	alignItems: 'center',
	justifyContent: 'center',
	transitionDuration: '100ms',
	transitionProperty: 'background-color',
	transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
	margin: ((ICON_CIRCLE_SIZE - ICON_SIZE) / 2) * -1,
	borderRadius: 999,
	width: ICON_CIRCLE_SIZE,
	height: ICON_CIRCLE_SIZE,
	selectors: {
		[`${button}:hover:not(:disabled) &`]: { backgroundColor: vars.palette.contrast_50 },
		[`${button}:focus-visible &`]: {
			outline: `2px solid ${vars.palette.primary_500}`,
			outlineOffset: 2,
		},
	},
});

export const text = style({
	whiteSpace: 'nowrap',
	color: 'inherit',
});

export const icon = style({
	pointerEvents: 'none',
	width: iconSize.md,
	height: iconSize.md,
});