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

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

export const link = style({
	display: 'flex',
	flexDirection: 'row',
	gap: 10,
	alignItems: 'center',
	paddingLeft: 16,
	textDecoration: 'none',
	cursor: 'pointer',
	selectors: {
		'&:hover': {
			backgroundColor: colorMix(colors.contrast_50, vars.opacity.hover),
		},
	},
});

export const spine = style({
	display: 'flex',
	flexDirection: 'column',
	flexShrink: 0,
	gap: 4,
	alignItems: 'center',
	width: 36,
});

export const segment = style({
	backgroundColor: vars.palette.contrast_100,
	width: 2,
	height: 9,
	selectors: {
		'.theme--dark &, .theme--dim &': {
			backgroundColor: vars.palette.contrast_200,
		},
	},
});

export const dash = style({
	backgroundColor: vars.palette.contrast_200,
	width: 2,
	height: 2,
});