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

const indeterminate = keyframes({
  '0%': { transform: 'translateX(-100%)' },
  '100%': { transform: 'translateX(250%)' },
});

export const IdleSlot = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  WebkitAppRegion: 'no-drag',
  flexShrink: 0,
});

export const GhostCheck = style({
  all: 'unset',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: toRem(28),
  height: toRem(28),
  borderRadius: config.radii.R300,
  color: color.Surface.OnContainer,
  opacity: 0,
  cursor: 'pointer',
  transition: 'opacity 0.15s ease, background-color 0.15s ease',
  selectors: {
    '&[data-visible="true"]': {
      opacity: 0.65,
    },
    '&:hover': {
      opacity: 1,
      backgroundColor: color.Surface.ContainerHover,
    },
  },
});

export const Bar = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S200,
  height: toRem(22),
  minWidth: toRem(120),
  maxWidth: toRem(200),
  padding: `0 ${config.space.S200}`,
  borderRadius: config.radii.R300,
  backgroundColor: color.SurfaceVariant.Container,
  color: color.SurfaceVariant.OnContainer,
  WebkitAppRegion: 'no-drag',
  flexShrink: 0,
  boxSizing: 'border-box',
});

export const BarTrack = style({
  position: 'relative',
  flex: 1,
  height: toRem(4),
  borderRadius: toRem(2),
  overflow: 'hidden',
  backgroundColor: color.Surface.ContainerLine,
  minWidth: toRem(64),
});

export const BarFill = style({
  position: 'absolute',
  inset: '0 auto 0 0',
  height: '100%',
  borderRadius: 'inherit',
  backgroundColor: color.Success.Main,
  transition: 'width 120ms linear',
});

export const BarIndeterminate = style({
  position: 'absolute',
  top: 0,
  bottom: 0,
  left: 0,
  width: '40%',
  borderRadius: 'inherit',
  backgroundColor: color.Secondary.Main,
  animation: `${indeterminate} 1s ease-in-out infinite`,
});

export const BarLabel = style({
  flexShrink: 0,
  fontVariantNumeric: 'tabular-nums',
  opacity: 0.9,
  minWidth: toRem(28),
  textAlign: 'right',
});

export const Chip = style({
  height: toRem(22),
  maxWidth: toRem(260),
  padding: `0 ${config.space.S100} 0 ${config.space.S200}`,
  borderRadius: config.radii.R300,
  backgroundColor: color.Success.Container,
  color: color.Success.OnContainer,
  WebkitAppRegion: 'no-drag',
  flexShrink: 0,
  boxSizing: 'border-box',
});

export const ChipText = style({
  maxWidth: toRem(140),
});

export const ChipAction = style({
  all: 'unset',
  display: 'inline-flex',
  alignItems: 'center',
  height: toRem(18),
  padding: `0 ${config.space.S200}`,
  borderRadius: config.radii.R300,
  backgroundColor: color.Success.Main,
  color: color.Success.OnMain,
  fontSize: toRem(11),
  fontWeight: 600,
  cursor: 'pointer',
  whiteSpace: 'nowrap',
  selectors: {
    '&:hover': {
      filter: 'brightness(1.05)',
    },
  },
});

export const ChipDismiss = style({
  all: 'unset',
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: toRem(18),
  height: toRem(18),
  borderRadius: config.radii.R300,
  cursor: 'pointer',
  opacity: 0.7,
  fontSize: toRem(14),
  lineHeight: 1,
  selectors: {
    '&:hover': {
      opacity: 1,
      backgroundColor: 'rgba(0,0,0,0.08)',
    },
  },
});