import { style } from '@vanilla-extract/css';
import { colors } from '#/styles/colors';
import { vars } from '#/styles/contract.css';
import { iconSize } from '#/styles/tokens.css';
const viewBase = {
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
} as const;
export const outer = style(viewBase);
export const panel = style(viewBase);
export const blurButton = style({
appearance: 'none',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'row',
gap: 8,
alignItems: 'center',
justifyContent: 'flex-start',
margin: 0,
border: 0,
borderRadius: 8,
backgroundColor: vars.palette.contrast_25,
padding: 12,
paddingInline: 13,
width: '100%',
textAlign: 'left',
cursor: 'pointer',
selectors: {
'&:focus-visible': {
outline: `2px solid ${vars.palette.primary_500}`,
outlineOffset: -2,
},
'&:hover, &:active': {
backgroundColor: vars.palette.contrast_50,
},
},
});
export const iconWrap = style({
width: iconSize.lg,
height: iconSize.lg,
color: colors.textContrastMedium,
flexShrink: 0,
});
export const labelText = style({
flex: 1,
});
export const toggleText = style({
marginBottom: 1,
});
export const learnMoreButton = style({
appearance: 'none',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
margin: 0,
border: 0,
backgroundColor: 'transparent',
paddingTop: 8,
paddingBottom: 0,
paddingInline: 0,
width: '100%',
textAlign: 'left',
cursor: 'pointer',
selectors: {
'&:focus-visible': {
outline: 'none',
},
},
});
export const learnMoreLink = style({
borderRadius: 2,
selectors: {
[`${learnMoreButton}:focus-visible &`]: {
textDecoration: 'underline',
},
[`${learnMoreButton}:hover &`]: {
textDecoration: 'underline',
},
},
});