import { style } from '@vanilla-extract/css';
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { DefaultReset, color, config, toRem } from 'folds';

export const TimelineFloat = recipe({
  base: [
    DefaultReset,
    {
      position: 'absolute',
      left: '50%',
      transform: 'translateX(-50%)',
      zIndex: 1,
      minWidth: 'max-content',
    },
  ],
  variants: {
    position: {
      Top: {
        top: config.space.S400,
      },
      Bottom: {
        bottom: config.space.S400,
      },
    },
  },
  defaultVariants: {
    position: 'Top',
  },
});

export type TimelineFloatVariants = RecipeVariants<typeof TimelineFloat>;

export const CarouselScroller = style([
  DefaultReset,
  {
    display: 'flex',
    gap: config.space.S200,
    overflowX: 'auto',
    overflowY: 'hidden',
    paddingBottom: config.space.S100,
    width: '100%',
    cursor: 'grab',
    userSelect: 'none',
  },
]);

export const CarouselScrollerDragging = style([
  DefaultReset,
  {
    cursor: 'grabbing',
  },
]);

export const CarouselItem = style([
  DefaultReset,
  {
    flex: '0 0 auto',
    maxWidth: '100%',
  },
]);

export const CarouselEdgeGradient = recipe({
  base: [
    DefaultReset,
    {
      position: 'absolute',
      top: 0,
      height: '100%',
      width: toRem(16),
      pointerEvents: 'none',
      zIndex: 1,
    },
  ],
  variants: {
    position: {
      Left: {
        left: 0,
        background: `linear-gradient(to right, ${color.Surface.Container}, rgba(116, 116, 116, 0))`,
      },
      Right: {
        right: 0,
        background: `linear-gradient(to left, ${color.Surface.Container}, rgba(116, 116, 116, 0))`,
      },
    },
  },
});

export const CarouselScrollBtn = recipe({
  base: [
    DefaultReset,
    {
      position: 'absolute',
      top: '50%',
      zIndex: 2,
    },
  ],
  variants: {
    position: {
      Left: {
        left: 0,
        transform: 'translate(-25%, -50%)',
      },
      Right: {
        right: 0,
        transform: 'translate(25%, -50%)',
      },
    },
  },
});