import { genComponentStyleHook } from '../../theme/internal';
const genRateStyle = token => {
  const {
    componentCls
  } = token;
  const itemCls = `${componentCls}-item`;
  return {
    [componentCls]: {
      position: 'relative',
      boxSizing: 'border-box',
      display: 'flex',
      flexDirection: 'column',
      flexWrap: 'wrap',
      '&-rtl': {
        direction: 'rtl'
      },
      [`& > ${itemCls}`]: {
        boxSizing: 'border-box',
        // Motion
        '&-fade': {
          '&-enter': {
            '&-from': {
              opacity: 0
            },
            '&-active': {
              transition: `opacity ${token.motionDurationSlow} ${token.motionEaseOut}`
            }
          },
          '&-leave': {
            '&-to': {
              opacity: 0
            },
            '&-active': {
              opacity: 0,
              transition: `opacity ${token.motionDurationFast} ${token.motionEaseOut}`
            }
          }
        },
        [`&:not(${itemCls}-fade)`]: {
          transition: ['left', 'right', 'top'].map(prop => `${prop} ${token.motionDurationSlow} ${token.motionEaseOut}`).join(',')
        }
      }
    }
  };
};
// ============================== Export ==============================
export default genComponentStyleHook('Masonry', token => {
  return [genRateStyle(token)];
});