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

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

export const root = style({
	width:          '100%',
	height:         '100%',
	display:        'flex',
	justifyContent: 'center',
});

export const center = style({
	boxSizing: 'border-box',
	width:     '100%',
	height:    'max-content',
	padding:   '2em',
});

export const title_group = style({
	marginBottom:   '1em',
	width:          '100%',
	height:         '3.5em',
	display:        'flex',
	justifyContent: 'space-between',
	'@media': {
		'screen and (min-width: 768px)': {
			height: '4em',
		},
	},
});

export const title_text_group = style({
	flexGrow:     1,
	boxSizing:    'border-box',
	height:       '100%',
	borderBottom: `1px solid ${colors.background2}`,
});

export const title = style({
	margin:   0,
	fontSize: '1.5em',
	'@media': {
		'screen and (min-width: 768px)': {
			fontSize: '2em',
		},
	},
});

export const supertitle = style({
	margin:   0,
	color:    colors.foreground2,
	fontSize: '0.9em',
	'@media': {
		'screen and (min-width: 768px)': {
			fontSize: '1em',
		},
	},
});

export const download_button = style({
	width:           'auto',
	height:          '100%',
	marginLeft:      '2em',
	padding:         0,
	border:          `1px solid ${colors.background2}`,
	backgroundColor: colors.background,
	color:           colors.foreground,
});

const download_button_image = style({
	width:      'auto',
	height:     '100%',
	transition: 'background-color 0.35s',
	':hover': {
		backgroundColor: colors.background2,
	},
});

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

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

export const download_tty_group = style({
	display: 'none',
	'@media': {
		'screen and (min-width: 768px)': {
			display:       'block',
			margin:        0,
			marginBottom:  '1em',
			borderBottom:  `1px solid ${colors.background2}`,
			paddingBottom: '1em',
		},
	},
});