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({
	width:   '100%',
	height:  'max-content',
	padding: '2em',
});

export const title_group = style({
	marginBottom:   '1em',
	width:          '100%',
	height:         '4em',
	display:        'flex',
	justifyContent: 'space-between'
});

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: '2em',
});

export const supertitle = style({
	margin: 0,
	color:  colors.foreground2
});

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

export const download_button_image = style({
	display: 'block',
	width:   'auto',
	height:  '100%',
});

export const download_text_section = style({
	marginLeft: '1em',
});

export const download_text = style({
	margin:     '0.5em 0',
	fontFamily: 'monospace',
	fontSize:   '1.5em',
});