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

export const header = style({
  paddingTop: rem(vars.spacing.sm),
  backgroundColor: `light-dark(${vars.colors.gray[0]}, ${vars.colors.dark[6]})`,
  borderBottom: `${rem(1)} solid light-dark(${
    vars.colors.gray[2]
  }, transparent)`,
  marginBottom: rem(120),
})

export const mainSection = style({
  paddingBottom: rem(vars.spacing.sm),
})

export const user = style({
  color: `light-dark(${vars.colors.black}, ${vars.colors.dark[0]})`,
  padding: `${rem(vars.spacing.xs)} ${rem(vars.spacing.sm)}`,
  borderRadius: rem(vars.radius.sm),
  transition: 'background-color 100ms ease',

  ':hover': {
    backgroundColor: `light-dark(${vars.colors.white}, ${vars.colors.dark[8]})`,
  },

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

export const userActive = style({
  backgroundColor: `light-dark(${vars.colors.white}, ${vars.colors.dark[8]})`,
})

export const tabsList = style({
  '::before': {
    display: 'none',
  },
})

export const tab = styleVariants({
  default: {
    fontWeight: 500,
    height: rem(38),
    backgroundColor: 'transparent',
    position: 'relative',
    bottom: '-1px',

    ':hover': {
      backgroundColor: `light-dark(${vars.colors.gray[1]}, ${vars.colors.dark[5]})`,
    },
  },
  active: {
    backgroundColor: `light-dark(${vars.colors.white}, ${vars.colors.dark[7]})`,
    borderColor: `light-dark(${vars.colors.gray[2]}, ${vars.colors.dark[7]})`,
    borderBottomColor: 'transparent',
  },
})
