import { createVar, style } from '@vanilla-extract/css';
import { CENTER_COLUMN_WIDTH } from '#/components/web/Layout/const';
import { vars } from '#/styles/contract.css';
import { zIndex } from '#/styles/tokens.css';
const CENTER_COLUMN_FRAME = CENTER_COLUMN_WIDTH + 2;
export const bottomBarHeightVar = createVar();
export const root = style({
display: 'flex',
flexDirection: 'column',
flexShrink: 0,
width: '100%',
minHeight: '100dvh',
});
export const body = style({
display: 'grid',
flex: '1 0 auto',
gridTemplateColumns: 'auto minmax(0, 100%) auto',
justifyContent: 'center',
minWidth: 0,
'@media': {
'screen and (min-width: 800px)': {
gridTemplateColumns: `1fr minmax(0, ${CENTER_COLUMN_FRAME}px) 1fr`,
},
},
});
export const rail = style({
display: 'flex',
position: 'sticky',
top: 0,
flexDirection: 'column',
alignSelf: 'start',
maxHeight: '100dvh',
overflowY: 'auto',
scrollbarWidth: 'thin',
});
export const railLeft = style({
justifySelf: 'end',
minWidth: 'max-content',
});
export const railRight = style({
justifySelf: 'start',
});
export const railRightFluid = style({
width: '100%',
minWidth: 280,
maxWidth: 300 + 24 * 2,
});
export const main = style({
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
minWidth: 0,
'@media': {
'screen and (min-width: 800px)': {
borderRight: `1px solid ${vars.palette.contrast_100}`,
borderLeft: `1px solid ${vars.palette.contrast_100}`,
},
},
});
export const bottom = style({
position: 'sticky',
bottom: 0,
zIndex: zIndex.raised,
width: '100%',
});
export const rootFixed = style({
height: '100dvh',
overflow: 'hidden',
});
export const bodyFixed = style({
flex: 1,
gridTemplateRows: '1fr',
minHeight: 0,
});
export const bodyWide = style({
'@media': {
'screen and (min-width: 800px)': {
gridTemplateColumns: '1fr auto 1fr',
transform: 'translateX(20px)',
},
'screen and (min-width: 1100px) and (max-width: 1300px)': {
transform: 'translateX(40px)',
},
},
});
export const mainFixed = style({
minHeight: 0,
overflow: 'hidden',
});
export const mainPlain = style({
'@media': {
'screen and (min-width: 800px)': {
borderRight: 'none',
borderLeft: 'none',
},
},
});
export const bottomBarPlaceholder = style({
flexShrink: 0,
height: 51,
});