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

export const footer = style({
  paddingTop: rem(vars.spacing.xl),
  paddingBottom: rem(vars.spacing.xl),
  backgroundColor: `light-dark(${vars.colors.gray[0]}, ${vars.colors.dark[6]})`,
  borderTop: `${rem(1)} solid light-dark(${vars.colors.gray[2]}, transparent)`,
})

export const logo = style({
  maxWidth: rem(200),

  '@media': {
    [`(max-width: ${vars.breakpoints.sm})`]: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
    },
  },
})

export const description = style({
  marginTop: rem(5),

  '@media': {
    [`(max-width: ${vars.breakpoints.sm})`]: {
      marginTop: rem(vars.spacing.xs),
      textAlign: 'center',
    },
  },
})

export const inner = style({
  display: 'flex',
  justifyContent: 'space-between',

  '@media': {
    [`(max-width: ${vars.breakpoints.sm})`]: {
      flexDirection: 'column',
      alignItems: 'center',
    },
  },
})

export const groups = style({
  display: 'flex',
  flexWrap: 'wrap',

  '@media': {
    [`(max-width: ${vars.breakpoints.sm})`]: {
      display: 'none',
    },
  },
})

export const wrapper = style({
  width: rem(160),
})

export const link = style({
  display: 'block',
  color: `light-dark(${vars.colors.gray[6]}, ${vars.colors.dark[1]})`,
  fontSize: vars.fontSizes.sm,
  paddingTop: rem(3),
  paddingBottom: rem(3),

  ':hover': {
    textDecoration: 'underline',
  },
})

export const title = style({
  fontSize: vars.fontSizes.lg,
  fontWeight: 700,
  fontFamily: `Greycliff CF, ${vars.fontFamily}`,
  marginBottom: Number(vars.spacing.xs) / 2,
  color: `light-dark(${vars.colors.black}, ${vars.colors.white})`,
})

export const afterFooter = style({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginTop: vars.spacing.xl,
  paddingTop: vars.spacing.xl,
  paddingBottom: vars.spacing.xl,
  borderTop: `rem(1) solid light-dark(${vars.colors.gray[2]}, ${vars.colors.dark[4]})`,

  '@media': {
    [`(max-width: ${vars.breakpoints.sm})`]: {
      flexDirection: 'column',
    },
  },
})

export const social = style({
  '@media': {
    [`(max-width: ${vars.breakpoints.sm})`]: {
      marginTop: vars.spacing.xs,
    },
  },
})
