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

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

const openAnimation = keyframes({
  from: { height: 0 },
  to: { height: 'var(--radix-accordion-content-height)' },
});

const closeAnimation = keyframes({
  from: { height: 'var(--radix-accordion-content-height)' },
  to: { height: 0 },
});

export const container = style({
  overflow: 'hidden',

  selectors: {
    '&[data-state="open"]': { animation: `${openAnimation} 250ms ease-out` },
    '&[data-state="closed"]': { animation: `${closeAnimation} 250ms ease-out` },
  },
});

export const content = style({
  marginTop: vars.components.accordion.space.contentTop,
  marginBottom: vars.components.accordion.space.contentBottom,
});