import { style } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';
import { DefaultReset, config, toRem } from 'folds';

export const Root = style([
  DefaultReset,
  {
    display: 'flex',
    flexDirection: 'column',
    flexGrow: 1,
    minHeight: 0,
    minWidth: 0,
  },
]);

export const Header = style({
  paddingLeft: config.space.S200,
  paddingRight: config.space.S200,
});

export const Body = style([
  DefaultReset,
  {
    flexGrow: 1,
    minHeight: 0,
    overflow: 'auto',
    padding: config.space.S400,
  },
]);

export const Panel = style({
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S300,
  width: '100%',
});

export const Row = style({
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  gap: config.space.S200,
  alignItems: 'center',
});

export const Field = style({
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S100,
  minWidth: toRem(160),
  flexGrow: 1,
});

export const Image = style({
  maxWidth: '100%',
  height: 'auto',
  borderRadius: config.radii.R300,
});

export const Spacer = recipe({
  base: {
    flexShrink: 0,
  },
  variants: {
    size: {
      sm: { height: config.space.S200 },
      md: { height: config.space.S400 },
      lg: { height: config.space.S600 },
    },
  },
  defaultVariants: {
    size: 'md',
  },
});