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

const wipeIn = keyframes({
  '0%': {
    clipPath: 'inset(0 100% 0 0)',
    opacity: 0,
  },
  '100%': {
    clipPath: 'inset(0 0 0 0)',
    opacity: 1,
  },
});

const wipeOut = keyframes({
  '0%': {
    clipPath: 'inset(0 0 0 0)',
    opacity: 1,
  },
  '100%': {
    clipPath: 'inset(0 100% 0 0)',
    opacity: 0,
  },
});

export const NewMessagePill = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S100,
  backgroundColor: '#2E7D32',
  color: '#ffffff',
  padding: `${config.space.S100} ${config.space.S200}`,
  borderRadius: '999px',
  cursor: 'pointer',
  fontSize: '12px',
  fontWeight: 500,
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  maxWidth: '200px',
  animation: `${wipeIn} 0.3s ease-out forwards`,
  transition: 'background-color 0.15s ease',
  WebkitAppRegion: 'no-drag',
  selectors: {
    '&:hover': {
      backgroundColor: '#388E3C',
    },
  },
});

export const NewMessagePillExiting = style({
  animation: `${wipeOut} 0.2s ease-in forwards`,
});

export const TitleBar = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  height: '32px',
  minHeight: '32px',
  backgroundColor: color.Surface.Container,
  borderBottom: `1px solid ${color.Surface.ContainerLine}`,
  position: 'relative',
  zIndex: 1000,
  userSelect: 'none',
  WebkitUserSelect: 'none',
});

export const TitleBarDragRegion = style({
  display: 'flex',
  alignItems: 'center',
  height: '100%',
  flexGrow: 1,
  paddingLeft: config.space.S200,
  cursor: 'default',
  WebkitAppRegion: 'drag',
  color: color.Surface.OnContainer,
});

export const TitleBarBackButton = style({
  WebkitAppRegion: 'no-drag',
  flexShrink: 0,
});

export const SyncStatusBadge = style({
  position: 'absolute',
  left: '50%',
  top: '50%',
  transform: 'translate(-50%, -50%)',
  padding: `${config.space.S100} ${config.space.S300}`,
  borderRadius: config.radii.R300,
  fontSize: '11px',
  fontWeight: 500,
  whiteSpace: 'nowrap',
  zIndex: 1001,
  pointerEvents: 'none',
  WebkitAppRegion: 'no-drag',
});

export const SyncStatusSuccess = style({
  backgroundColor: color.Success.Container,
  color: color.Success.OnContainer,
});

export const SyncStatusWarning = style({
  backgroundColor: color.Warning.Container,
  color: color.Warning.OnContainer,
});

export const SyncStatusCritical = style({
  backgroundColor: color.Critical.Container,
  color: color.Critical.OnContainer,
});