import { globalStyle, style } from '@vanilla-extract/css';
import { colors } from '#/styles/colors';
import { vars } from '#/styles/contract.css';
import { recipe } from '#/styles/recipe';
import { borderRadius, iconSize, space } from '#/styles/tokens.css';
const MOBILE_CARD_WIDTH = 165;
const FINAL_CARD_WIDTH = 120;
const GRID_GAP = space.md;
const WIDE = 'screen and (min-width: 800px)';
export const section = recipe(
{
base: {
backgroundColor: colors.contrast_25,
},
defaultVariants: { topBorder: true },
variants: {
topBorder: {
true: {
borderTopWidth: 1,
borderTopStyle: 'solid',
borderTopColor: colors.borderContrastLow,
},
},
},
},
{ debugId: 'section' },
);
export const header = style({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: space.md,
paddingInline: space.lg,
});
export const seeMoreTrigger = style({
border: 'none',
background: 'none',
padding: 0,
font: 'inherit',
cursor: 'pointer',
});
export const seeMoreText = style({
selectors: {
[`${seeMoreTrigger}:hover &`]: { textDecoration: 'underline' },
},
});
export const grid = style({
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'row',
gap: GRID_GAP,
padding: space.lg,
paddingTop: space.md,
overflowX: 'auto',
scrollSnapType: 'x mandatory',
scrollPaddingInline: space.lg,
scrollbarWidth: 'none',
selectors: {
'&::-webkit-scrollbar': { display: 'none' },
},
'@media': {
[WIDE]: {
flexWrap: 'wrap',
overflowX: 'visible',
scrollSnapType: 'none',
},
},
});
globalStyle(`${grid} > *:nth-child(n+4)`, {
'@media': {
[WIDE]: { display: 'none' },
},
});
export const cardBase = style({
boxSizing: 'border-box',
display: 'flex',
position: 'relative',
flexDirection: 'column',
flexShrink: 0,
gap: space.xs,
borderWidth: 1,
borderStyle: 'solid',
borderRadius: borderRadius.lg,
borderColor: colors.borderContrastLow,
boxShadow: vars.shadow.sm,
backgroundColor: colors.bg,
padding: space.md,
width: MOBILE_CARD_WIDTH,
minWidth: 0,
scrollSnapAlign: 'start',
'@media': {
[WIDE]: {
flexBasis: `calc(30% - ${GRID_GAP / 2}px)`,
flexGrow: 1,
width: 'auto',
},
},
});
export const cardLink = style({
textDecoration: 'none',
color: 'inherit',
cursor: 'pointer',
selectors: {
'&:hover, &:active': { borderColor: colors.borderContrastHigh },
},
});
export const dismiss = style({
display: 'flex',
position: 'absolute',
top: space.sm,
right: space.sm,
alignItems: 'center',
justifyContent: 'center',
zIndex: 1,
border: 'none',
background: 'none',
padding: space.xs,
color: colors.textContrastMedium,
cursor: 'pointer',
selectors: {
'&:hover': { color: colors.text },
},
});
export const body = style({
display: 'flex',
flexDirection: 'column',
gap: space.sm,
alignItems: 'center',
marginBottom: 'auto',
paddingBottom: space.sm,
});
export const identity = style({
display: 'flex',
flexDirection: 'column',
gap: space.xs,
alignItems: 'center',
alignSelf: 'stretch',
});
export const description = style({
width: '100%',
});
export const followPlaceholder = style({
borderRadius: borderRadius.sm,
backgroundColor: vars.palette.contrast_50,
width: '100%',
height: 33,
});
export const seeMoreCard = style({
display: 'flex',
flexDirection: 'column',
flexShrink: 0,
gap: space.sm,
alignItems: 'center',
justifyContent: 'center',
border: 'none',
background: 'none',
padding: space.md,
width: FINAL_CARD_WIDTH,
scrollSnapAlign: 'start',
color: colors.text,
cursor: 'pointer',
'@media': {
[WIDE]: { display: 'none' },
},
});
export const xIcon = style({
width: iconSize.xs,
height: iconSize.xs,
});
export const arrowRightIcon = style({
width: iconSize.lg,
height: iconSize.lg,
});