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

export const CategoryButton = style({
  flexGrow: 1,
});
export const CategoryButtonIcon = style({
  opacity: config.opacity.P400,
});

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

const pulse = keyframes({
  '0%, 100%': {
    opacity: 0.35,
  },
  '50%': {
    opacity: 0.55,
  },
});

/** Nav item is in a loading/opening state. */
export const RoomNavItemLoading = style({
  position: 'relative',
  overflow: 'hidden',
});

/** Soft primary wash over the whole room button. */
export const RoomNavLoadingBg = style({
  position: 'absolute',
  inset: 0,
  borderRadius: 'inherit',
  backgroundColor: color.Primary.Container,
  animation: `${pulse} 1.2s ease-in-out infinite`,
  pointerEvents: 'none',
  zIndex: 0,
});

/** Classic indeterminate bar along the bottom edge. */
export const RoomNavLoadingBar = style({
  position: 'absolute',
  left: 0,
  right: 0,
  bottom: 0,
  height: toRem(3),
  borderRadius: `0 0 ${config.radii.R400} ${config.radii.R400}`,
  backgroundColor: color.Primary.ContainerActive,
  overflow: 'hidden',
  pointerEvents: 'none',
  zIndex: 2,
  selectors: {
    '&::after': {
      content: '""',
      position: 'absolute',
      inset: 0,
      width: '45%',
      backgroundColor: color.Primary.Main,
      animation: `${indeterminate} 1s ease-in-out infinite`,
    },
  },
});

/** Keep nav content above the loading wash. */
export const RoomNavLoadingContent = style({
  position: 'relative',
  zIndex: 1,
});
