// node modules
import { createUseStyles } from 'react-jss'

export const useStyles = createUseStyles(() => ({
  inputWrapper: {
    position: 'relative',
    background: '#F6F6F6',
    borderRadius: '.5rem',
    boxSizing: 'border-box',
    display: 'flex',
    alignItems: 'center',
    height: '56px',
    maxWidth: '560px',
    margin: '0 auto',
    padding: '8px 16px',
  },
  input: {
    border: 'none',
    outline: 'none',
    background: 'none',
    all: 'unset',
    display: 'block',
    width: '100%',
    boxSizing: 'border-box',
    fontSize: '1rem',
    lineHeight: '1.5rem',
    borderRadius: '.5rem',
    caretColor: '#4B46EC',
  },
  closeButton: {
    border: 'none',
    background: 'none',
    marginLeft: 'auto',
    display: 'flex',
    cursor: 'pointer',
    visibility: 'visible',
  },

  hideCloseButton: {
    visibility: 'hidden',
  },

  inputActiveClass: {
    backgroundImage: 'linear-gradient(#4B46EC, #4B46EC)',
    backgroundPosition: 'bottom 0 center',
    backgroundSize: '100% 2px',
    backgroundRepeat: 'no-repeat',
  },
  inputDisabledClass: {
    cursor: 'not-allowed',
    opacity: 0.4,
  },
  inputErrorClass: {
    backgroundImage: 'linear-gradient(#FF4D2B, #FF4D2B)',
    backgroundPosition: 'bottom 0 center',
    backgroundSize: '100% 2px',
    backgroundRepeat: 'no-repeat',
  },
  inputLabelClass: {
    margin: '0px',
    top: '5px',
    color: '#868C99',
    position: 'absolute',
    transform: 'translateY(calc(0.75rem - 1px))',
    transition: 'all 0.2s ease 0s',
    pointerEvents: 'none',
  },

  inputLabelActiveClass: {
    top: '8px',
    fontSize: '.75rem',
    transform: 'translateY(0px)',
    fontWeight: 400,
    lineHeight: '1rem',
    position: 'absolute',
  },
  inputLabelErrorClass: { color: '#FF4D2B' },

  inputStartAdornmentClass: {
    lineHeight: '26px',
    fontWeight: 400,
    fontSize: '18px',
    letterSpacing: '-0.0024em',
    color: '#000',
    margin: '0 0 0 0.75rem',
  },
}))
