import { StyleSheet } from '../../Theme';

export default StyleSheet.createTheme((token) => ({
  outerContainer: {
    // 外层容器保持固定尺寸
    padding: 1, // 为内层边框预留空间
  },
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#838099',
    borderRadius: 8,
    paddingHorizontal: 16,
  },
  focus: {
    borderWidth: 2,
    borderColor: '#413F57',
    marginTop: -1, // 补偿边框增加的高度
    marginLeft: -1,
    marginRight: -1,
    marginBottom: -1,
  },
  input: {
    flex: 1,
    paddingHorizontal: 0,
    paddingVertical: 0,
    marginVertical: 0,
    alignItems: 'center',
    height: token['--spacing-4'],
  },

  inputWrapperDisabled: {
    backgroundColor: token['--color-fill-1'],
    borderColor: token['--color-border-1'],
  },
  inputWrapperError: {
    borderColor: token['--color-danger-7'],
  },
  tags: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap: token['--spacing-1'],
    marginVertical: token['--spacing-2'],
  },
  disabled: {
    opacity: 0.5,
  },
  hideText: {
    position: 'absolute',
    opacity: 0,
    zIndex: -1,
    height: 'auto',
  },
}));