import { fallbackVar, style } from '@vanilla-extract/css';
import { bottomBarHeightVar } from '#/components/Shell/Shell.css';
import { colors } from '#/styles/colors';
import { vars } from '#/styles/contract.css';
import { iconSize, zIndex } from '#/styles/tokens.css';
export const outer = style({
position: 'fixed',
bottom: `calc(${fallbackVar(bottomBarHeightVar, '0px')} + 30px)`,
left: 18,
zIndex: zIndex.float,
});
export const leftInline = style({ left: 'calc(50vw - 282px)' });
export const leftOutOfLine = style({ left: 'calc(50vw - 382px)' });
export const button = style({
appearance: 'none',
boxSizing: 'border-box',
display: 'flex',
position: 'relative',
alignItems: 'center',
justifyContent: 'center',
transition: 'transform 0.1s',
borderWidth: 1,
borderStyle: 'solid',
borderRadius: 999,
borderColor: vars.palette.contrast_100,
backgroundColor: vars.palette.contrast_0,
padding: 0,
width: 42,
height: 42,
overflow: 'hidden',
cursor: 'pointer',
selectors: {
'&:active': { transform: 'scale(0.9)' },
},
});
export const indicator = style({
backgroundColor: vars.palette.primary_50,
});
export const hover = style({
position: 'absolute',
inset: 0,
transition: 'opacity 0.1s',
opacity: 0,
backgroundColor: vars.palette.contrast_50,
pointerEvents: 'none',
willChange: 'opacity',
selectors: {
[`${button}:hover &`]: { opacity: 0.5 },
[`.theme--dim ${button}:hover &`]: { opacity: 0.45 },
[`.theme--dark ${button}:hover &`]: { opacity: 0.4 },
},
});
export const icon = style({
width: iconSize.lg,
height: iconSize.lg,
color: colors.textContrastMedium,
position: 'relative',
zIndex: 10,
});
export const iconIndicating = style({ color: colors.primary_500 });