import { recipe, RecipeVariants } from '@vanilla-extract/recipes';

import { vars } from '../css';

export const toastViewport = recipe({
  base: {
    display: 'flex',
    position: 'fixed',
    flexDirection: 'column',
    listStyle: 'none',
    zIndex: vars.zIndices.toast,
    padding: vars.components.toast.spaces.viewportPaddingX,
    maxWidth: '100vw',
  },

  variants: {
    vertical: {
      top: { top: 0 },
      bottom: { bottom: 0 },
    },
    horizontal: {
      left: { left: 0 },
      right: { right: 0 },
    },
  },

  defaultVariants: {
    vertical: 'bottom',
    horizontal: 'right',
  },
});

export type ToastViewportVariants = NonNullable<
  RecipeVariants<typeof toastViewport>
>;