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

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

export const headingLink = style({
	display: 'flex',
	flex: 1,
	minWidth: 0,
	flexDirection: 'row',
	gap: space.md,
});

export const headingRow = style({
	position: 'relative',
	display: 'flex',
	flex: 1,
	minWidth: 0,
	flexDirection: 'row',
	gap: space.sm,
});

export const headingOverlay = style({
	position: 'absolute',
	inset: 0,
	zIndex: 1,
	selectors: {
		'&:focus-visible': {
			outline: `2px solid ${colors.primary_500}`,
			outlineOffset: -2,
		},
	},
});

export const avatarLayer = style({
	position: 'relative',
	zIndex: 2,
});

export const nameRow = style({
	display: 'flex',
	flex: 1,
	minWidth: 0,
	flexDirection: 'row',
	alignItems: 'center',
});

export const name = style({
	flexShrink: 1,
});

export const badgePad = style({
	paddingLeft: space.xs,
});

export const bellOffIcon = style({
	width: iconSize.sm,
	height: iconSize.sm,
	color: colors.textContrastMedium,
});