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

import * as colors from '../../colors.css';

export const copy = style({
	display: 'flex',
	alignItems: 'center',
	width: 'max-content',
	backgroundColor: colors.background,
});

export const copy_button = style({
	display:         'flex',
	margin:          0,
	border:          'none',
	padding:         0,
	outline:         'inherit',
	fontFamily:      'monospace',
	fontSize:        '1.1em',
	lineHeight:      '2em',
	color:           'inherit',
	whiteSpace:      'pre-wrap',
	transition:      'background-color 0.35s',
	background:      'none',
	width:           'max-content',
	height:          '100%',
	':hover': {
		backgroundColor: colors.background2,
	},
});

const copy_image = style({
	boxSizing:  'border-box',
	border:     `1px solid ${colors.background2}`,
	padding:    '0.75em',
	width:      'auto',
	height:     '100%',
	selectors: {
		[`${copy}:hover &`]: {
		},
	},
});

export const copy_image_dark = style([copy_image, {
	display: 'block',
	'@media': {
		'(prefers-color-scheme: light)': {
			display: 'none',
		},
	},
}]);

export const copy_image_light = style([copy_image, {
	display: 'none',
	'@media': {
		'(prefers-color-scheme: light)': {
			display: 'block',
		},
	},
}]);

export const copied_image_dark = style([copy_image, {
	display: 'block',
	'@media': {
		'(prefers-color-scheme: light)': {
			display: 'none',
		},
	},
}]);

export const copied_image_light = style([copy_image, {
	display: 'none',
	'@media': {
		'(prefers-color-scheme: light)': {
			display: 'block',
		},
	},
}]);


export const copy_text = style({
	margin: 0,
	marginLeft: '1em',
	width:  'max-content',
});