motto/src/app/[...file]/components/copy.css.ts

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',
	fontFamily: 'monospace',
	fontSize:   '1.2em',
});