import { style } from '@vanilla-extract/css';
import { CENTER_COLUMN_WIDTH } from '#/components/web/Layout/const';
import { colors } from '#/styles/colors';
import { vars } from '#/styles/contract.css';
import { space } from '#/styles/tokens.css';
export const actions = style({
display: 'flex',
flexDirection: 'column',
gap: space.md,
width: '100%',
maxWidth: 280,
});
export const brand = style({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
});
export const container = style({
position: 'relative',
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
width: '100%',
maxWidth: CENTER_COLUMN_WIDTH,
minHeight: '100vh',
marginInline: 'auto',
paddingTop: 'env(safe-area-inset-top, 0px)',
paddingBottom: 'env(safe-area-inset-bottom, 0px)',
backgroundColor: vars.palette.contrast_0,
});
export const content = style({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: space._5xl,
flexGrow: 1,
height: '100%',
paddingBottom: '20vh',
'@media': {
'(max-width: 767px)': {
paddingBottom: space._5xl,
},
},
});
export const footer = style({
position: 'absolute',
inset: 0,
top: 'auto',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
gap: space.xl,
paddingBlock: space.lg,
paddingInline: space.xl,
borderTop: `1px solid ${vars.palette.contrast_200}`,
});
export const footerSpacer = style({
flexGrow: 1,
});
export const logotypeWrap = style({
paddingTop: space._5xl,
paddingBottom: space.sm,
});
export const logo = style({
width: 92,
height: 'auto',
});
export const logotype = style({
width: 161,
height: 'auto',
color: colors.text,
});