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

export const SequenceCardStyle = style({
  padding: config.space.S300,
});

export const SettingsSearchResult = style({
  width: '100%',
  textAlign: 'left',
  cursor: 'pointer',
  border: 'none',
  background: 'transparent',
  padding: `${config.space.S200} ${config.space.S300}`,
  borderRadius: config.radii.R400,
  display: 'flex',
  alignItems: 'flex-start',
  gap: config.space.S200,
  selectors: {
    '&:hover': {
      backgroundColor: color.Background.ContainerHover,
    },
    '&[aria-pressed="true"]': {
      backgroundColor: color.Background.ContainerActive,
    },
  },
});