hunk.code_window:   await page
       .getByTestId('upload-avatar')
       .setInputFiles('./tests/fixtures/smile.png');
     await page.getByTestId('workspace-name').click();
     await page.getByTestId('workspace-card').nth(0).click();
     await page.waitForTimeout(1000);
     await page.getByTestId('workspace-name').click();
     await page.getByTestId('workspace-card').nth(1).click();
  
hunk.labels: keep keep add keep keep keep keep keep
hunk.after_edit:   await page.mouse.click(0, 0);
  
hunk.file_path: tests/parallels/local-first-avatar.spec.ts
hunk.type: add
file: // Credits to sonner
  // License on the MIT
  // https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/styles.css
  
  import { keyframes, style, styleVariants } from '@vanilla-extract/css';
  
  const swipeOut = keyframes({
    '0%': {
      transform:
        'translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)))',
      opacity: 1,
    },
    '100%': {
      transform:
        'translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%))',
      opacity: 0,
    },
  });
  
  export const notificationCenterViewportStyle = style({
    position: 'fixed',
    bottom: '200px',
    right: '60px',
    width: '380px',
    margin: 0,
    zIndex: 2147483647,
    outline: 'none',
  });
  
  export const notificationStyle = style({
    position: 'absolute',
    borderRadius: '8px',
    transition: 'transform 0.3s,opacity 0.3s, height 0.3s',
    transform: 'var(--y)',
    zIndex: 'var(--z-index)',
    opacity: 0,
    touchAction: 'none',
    willChange: 'transform, opacity, height',
    selectors: {
      '&[data-visible=false]': {
        opacity: '0 !important',
        pointerEvents: 'none',
      },
      '&[data-swiping=true]::before': {
        content: '""',
        position: 'absolute',
        left: '0',
        right: '0',
        top: '50%',
        height: '100%',
        transform: 'scaleY(3) translateY(-50%)',
      },
      '&[data-swiping=false][data-removed=true]::before': {
        content: '""',
        position: 'absolute',
        inset: '0',
        transform: 'scaleY(2)',
      },
      '&[data-mounted=true]': {
        opacity: 1,
        vars: {
          '--y': 'translateY(0)',
        },
      },
      '&[data-expanded=false][data-front=false]': {
        opacity: 1,
        height: 'var(--front-toast-height)',
        vars: {
          '--scale': 'var(--toasts-before)* 0.05 + 1',
          '--y':
            'translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)))',
        },
      },
      '&[data-mounted=true][data-expanded=true]': {
        height: 'var(--initial-height)',
        vars: {
          '--y': 'translateY(calc(var(--lift) * var(--offset)))',
        },
      },
      '&[data-removed=true][data-front=true][data-swipe-out=false]': {
        opacity: 0,
        vars: {
          '--y': 'translateY(calc(var(--lift) * -100%))',
        },
      },
      '&[data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]':
        {
          opacity: 0,
          vars: {
            '--y':
              'translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%))',
          },
        },
      '&[data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false] ':
        {
          transition: 'transform 500ms, opacity 200ms',
          opacity: 0,
          vars: {
            '--y': 'translateY(40%)',
          },
        },
      '&[data-removed=true][data-front=false]::before ': {
        height: 'calc(var(--initial-height) + 20%)',
      },
      '&[data-swiping=true]': {
        transform: 'var(--y) translateY(var(--swipe-amount, 0px))',
        transition: 'none',
      },
      '&[data-swipe-out=true]': {
        animation: `${swipeOut} 0.3s ease-in-out forwards`,
      },
    },
    vars: {
      '--y': 'translateY(100%)',
      '--lift': '-1',
      '--lift-amount': 'calc(var(--lift) * 14px)',
    },
    '::after': {
      content: '""',
      position: 'absolute',
      width: '100%',
      height: '15px',
      left: '0',
      bottom: '100%',
      borderRadius: '8px',
    },
  });
  export const notificationIconStyle = style({
    fontSize: '24px',
    marginLeft: '18px',
    marginRight: '12px',
    color: 'var(--affine-processing-color)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  });
  export const notificationContentStyle = style({
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    padding: '16px 0',
    width: '100%',
    borderRadius: '8px',
    boxShadow: 'var(--affine-shadow-1)',
    border: '1px solid var(--affine-border-color)',
    background: 'var(--affine-white)',
    transition: 'all 0.3s',
  });
  export const notificationTitleContactStyle = style({
    marginRight: '22px',
    width: '200px',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    lineHeight: '1.5',
  });
  export const notificationTitleStyle = style({
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    justifyContent: 'flex-start',
  });
  export const notificationDescriptionStyle = style({
    fontSize: 'var(--affine-font-sm)',
    color: 'var(--affine-text-secondary-color)',
    marginBottom: '4px',
  });
  export const notificationTimeStyle = style({
    fontSize: 'var(--affine-font-sm)',
    color: 'var(--affine-text-secondary-color)',
    marginBottom: '4px',
  });
  export const closeButtonStyle = style({
    fontSize: '22px',
    marginRight: '19px',
    marginLeft: '16px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  });
  export const closeButtonWithoutUndoStyle = style({
    marginLeft: '92px',
  });
  export const undoButtonStyle = style({
    fontSize: 'var(--affine-font-sm)',
    background: 'var(--affine-hover-color)',
    padding: '3px 6px',
    borderRadius: '4px',
    color: 'var(--affine-processing-color)',
    cursor: 'pointer',
  });
  export const messageStyle = style({
    fontSize: 'var(--affine-font-sm)',
    width: '200px',
    marginLeft: '50px',
    lineHeight: '18px',
  });
  export const progressBarStyle = style({
    fontSize: 'var(--affine-font-sm)',
    width: '100%',
    height: '10px',
    marginTop: '10px',
    padding: '0 16px',
    borderRadius: '2px',
    marginBottom: '16px',
  });
  export const darkSuccessStyle = style({
    background: 'var(--affine-success-color)',
    borderRadius: '8px',
  });
  export const darkInfoStyle = style({
    background: 'var(--affine-processing-color)',
    borderRadius: '8px',
  });
  export const darkErrorStyle = style({
    background: 'var(--affine-error-color)',
    borderRadius: '8px',
  });
  export const darkWarningStyle = style({
    background: 'var(--affine-warning-color)',
    borderRadius: '8px',
  });
  export const lightSuccessStyle = style({
    background: 'var(--affine-background-success-color)',
    borderRadius: '8px',
  });
  export const lightInfoStyle = style({
    background: 'var(--affine-background-processing-color)',
    borderRadius: '8px',
  });
  export const lightErrorStyle = style({
    background: 'var(--affine-background-error-color)',
    borderRadius: '8px',
  });
  export const lightWarningStyle = style({
    background: 'var(--affine-background-warning-color)',
    borderRadius: '8px',
  });
  export const darkColorStyle = style({
    color: 'var(--affine-white)',
  });
  export const lightInfoIconStyle = style({
    color: 'var(--affine-processing-color)',
  });
  export const defaultCollapseStyle = styleVariants({
    secondary: {
      '::after': {
        background: 'rgba(0,0,0,0.02)',
        top: '0px',
        transition: 'background-color 0.3s',
      },
    },
    tertiary: {
      '::after': {
        background: 'rgba(0,0,0,0.04)',
        top: '0px',
        transition: 'background-color 0.3s',
      },
    },
  });
  export const lightCollapseStyle = styleVariants({
    secondary: {
      '::after': {
        background: 'rgba(0,0,0,0.04)',
        top: '0px',
        transition: 'background-color 0.3s',
      },
    },
    tertiary: {
      '::after': {
        background: 'rgba(0,0,0,0.08)',
        top: '0px',
        transition: 'background-color 0.3s',
      },
    },
  });
  export const darkCollapseStyle = styleVariants({
    secondary: {
      '::after': {
        background: 'rgba(0,0,0,0.08)',
        top: '0px',
        transition: 'background-color 0.3s',
      },
    },
    tertiary: {
      '::after': {
        background: 'rgba(0,0,0,0.16)',
        top: '0px',
        transition: 'background-color 0.3s',
      },
    },
  });
  