import { vars } from '@/theme'
import { rem } from '@mantine/core'
import { style, styleVariants } from '@vanilla-extract/css'

export const control = style({
  width: rem(150),
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: rem(5),
  borderRadius: vars.radius.md,
  border: `rem(1) solid light-dark(${vars.colors.gray[2]}, ${vars.colors.dark[6]})`,
  transition: 'background-color 150ms ease',
  marginRight: rem(5),
  selectors: {
    '&[data-expanded]': {
      backgroundColor: `light-dark(${vars.colors.white}, ${vars.colors.dark[6]})`,
    },
    '&:hover': {
      backgroundColor: `light-dark(${vars.colors.gray[0]}, ${vars.colors.dark[5]})`,
    },
  },
})

export const label = style({
  fontWeight: 500,
  fontSize: vars.fontSizes.sm,
})

export const icon = styleVariants({
  default: {
    transition: 'transform 150ms ease',
    transform: 'rotate(0deg)',
  },
  expanded: {
    transform: 'rotate(180deg)',
  },
})
