import { styled } from 'styleh-components'
import { isSafe } from 'exotic'

const userSelect = (item?: string) => {
  let value
  const itemLowerCase = isSafe(item) ? item.toLocaleLowerCase() : ''
  switch (itemLowerCase) {
    case 'auto':
      value = itemLowerCase
      break
    case 'text':
      value = itemLowerCase
      break
    case 'all':
      value = itemLowerCase
      break
    case 'none':
    case 'n':
    default:
      value = 'none'
      break
  }

  return (
    `
      -webkit-user-select: ${value};
      -moz-user-select: ${value};
      -ms-user-select: ${value};
      user-select: ${value};
    `
  )
}

const borderLine = styled.css`
  content: '';
  width: 100%;
  position: absolute;
  height: rem(1);
  background: var(--color-light-grey);
  bottom: 0;
  left: 0;

  @phone-or-smaller() {
    width: 100%;
  }
`

export {
  borderLine,
  userSelect,
}
export default borderLine