import { 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';
// marks navigable cards for descendant hover styles
const isInteractive = style({});
export const card = recipe(
{
base: {
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
transitionProperty: 'border-color',
borderWidth: 1,
borderStyle: 'solid',
borderRadius: borderRadius.md,
borderColor: vars.palette.contrast_100,
backgroundColor: 'transparent',
width: '100%',
overflow: 'hidden',
textDecoration: 'none',
color: 'inherit',
selectors: {
'&:focus-visible': {
outline: `2px solid ${vars.palette.primary_500}`,
outlineOffset: -2,
},
},
},
variants: {
interactive: {
true: [
isInteractive,
{
cursor: 'pointer',
selectors: {
'&:hover': { borderColor: vars.palette.contrast_300 },
'&:active': { backgroundColor: colors.bg },
},
},
],
},
},
},
{ debugId: 'card' },
);
export const body = style({
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
gap: 3,
paddingTop: space.sm,
});
export const bodyWithMedia = style({
transitionProperty: 'border-color',
borderTopWidth: 1,
borderTopStyle: 'solid',
borderTopColor: vars.palette.contrast_100,
selectors: {
[`${isInteractive}:hover &`]: { borderTopColor: vars.palette.contrast_300 },
},
});
export const titleBlock = style({
display: 'flex',
flexDirection: 'column',
gap: 4,
paddingRight: space.md,
paddingBottom: space.xs,
paddingLeft: space.md,
});
export const domainWrap = style({
paddingRight: space.md,
paddingLeft: space.md,
});
export const divider = style({
borderTopWidth: 1,
borderTopStyle: 'solid',
borderTopColor: vars.palette.contrast_100,
width: '100%',
});
export const domainRow = style({
display: 'flex',
flexDirection: 'row',
gap: space.xs,
alignItems: 'center',
paddingTop: 6,
paddingBottom: space.sm,
});
export const globe = style({
width: iconSize.xs,
height: iconSize.xs,
transitionProperty: 'color',
color: vars.palette.contrast_400,
selectors: {
[`${isInteractive}:hover &`]: { color: vars.palette.contrast_700 },
},
});
export const domain = style({
transitionProperty: 'color',
color: vars.palette.contrast_700,
selectors: {
[`${isInteractive}:hover &`]: { color: vars.palette.contrast_900 },
},
});