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

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

const headerBase = style({
  fontSize: vars.fontSizes.h5,
  fontWeight: vars.fontWeights.h5,
  width: '100%',
  justifyContent: 'space-between',
});

export const header = style([buttonReset, headerBase]);

export const icon = style({
  transition: 'transform .2s',
  transform: 'rotate(0deg)',
  fontSize: '1.5em',

  selectors: {
    [`${headerBase}[data-state="open"] &`]: {
      transform: 'rotate(180deg)',
    },
  },
});