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

export const widthVar = createVar('widthVar');

export const inputWrapper = style({
  vars: {
    [widthVar]: '100%',
  },
  width: widthVar,
  height: 28,
  padding: '4px 10px',
  color: 'var(--affine-icon-color)',
  border: '1px solid var(--affine-border-color)',
  backgroundColor: 'var(--affine-white-10)',
  borderRadius: 8,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  gap: 8,
  // icon size
  fontSize: '16px',

  selectors: {
    '&.no-border': {
      border: 'unset',
    },
    // size
    '&.large': {
      height: 32,
      // icon size
      fontSize: '20px',
    },
    '&.extra-large': {
      height: 40,
      padding: '8px 10px',
      // icon size
      fontSize: '20px',
    },
    // color
    '&.disabled': {
      background: 'var(--affine-hover-color)',
    },
    '&.error': {
      borderColor: 'var(--affine-error-color)',
    },
    '&.success': {
      borderColor: 'var(--affine-success-color)',
    },
    '&.warning': {
      borderColor: 'var(--affine-warning-color)',
    },
    '&.default.focus': {
      borderColor: 'var(--affine-primary-color)',
      boxShadow: 'var(--affine-active-shadow)',
    },
  },
});

export const input = style({
  width: '0',
  flex: 1,
  fontSize: 'var(--affine-font-xs)',
  lineHeight: '20px',
  fontWeight: '500',
  color: 'var(--affine-text-primary-color)',
  boxSizing: 'border-box',
  // prevent default style
  WebkitAppearance: 'none',
  WebkitTapHighlightColor: 'transparent',
  outline: 'none',
  border: 'none',

  selectors: {
    '&::placeholder': {
      color: 'var(--affine-placeholder-color)',
    },
    '&:disabled': {
      color: 'var(--affine-text-disable-color)',
    },
    '&.large, &.extra-large': {
      fontSize: 'var(--affine-font-base)',
      lineHeight: '24px',
    },
  },
});