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

export const ThreadsListPanel = style({
  width: toRem(340),
  '@media': {
    '(max-width: 750px)': {
      position: 'fixed',
      inset: 0,
      width: '100%',
      zIndex: 500,
    },
  },
});

export const ThreadsListHeader = style({
  flexShrink: 0,
  padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
  borderBottomWidth: config.borderWidth.B300,
});

export const ThreadsListToolbar = style({
  flexShrink: 0,
  padding: config.space.S200,
  borderBottomWidth: config.borderWidth.B300,
});

export const ThreadsListContent = style({
  padding: config.space.S200,
});

export const ThreadRow = style({
  width: '100%',
  textAlign: 'left',
  cursor: 'pointer',
  border: 'none',
  borderRadius: config.radii.R300,
  padding: config.space.S300,
  background: color.SurfaceVariant.Container,
  selectors: {
    '&:hover': { background: color.SurfaceVariant.ContainerHover },
    '&:active': { background: color.SurfaceVariant.ContainerActive },
  },
});