import styled, { css } from 'styled-components/macro'

import { devices } from 'config/devices'
import { isMobileDevice } from 'config/userAgent'

import { client } from 'features/AuthServiceApp/config/clients'

export const Wrapper = styled.div`
  background-color: ${({ theme }) => theme.colors.inputs};
  width: 100%;
  height: 45px;
  :not(:last-of-type) {
    border-bottom: 0.5px solid ${({ theme }) => theme.colors.black40};
  }
  ${client.styles.input}
`

export const Label = styled.label`
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
  font-weight: normal;
  font-size: 0.8rem;
  line-height: 0.9rem;
  letter-spacing: -0.01em;
  ${isMobileDevice
    ? css`
        font-size: 12px;
      `
    : ''};

  @media ${devices.tablet} {
    font-size: 1.6rem;
  }
`

const resetStyles = css`
  background-color: transparent;
  border: none;
  outline: none;
  :-webkit-autofill,
  :-webkit-autofill:hover,
  :-webkit-autofill:focus,
  :-webkit-autofill:active  {
    background-clip: text;
    /* stylelint-disable-next-line */
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    font-size: 16px;
  }
`

export const InputStyled = styled.input`
  ${resetStyles}

  padding: 0 16px;
  flex-grow: 1;
  height: 100%;
  color: ${({ theme }) => theme.colors.white};
  font-size: 16px;
  letter-spacing: 0.1px;

  ::placeholder {
    font-weight: normal;
    width: 100%;
    color: ${({ theme }) => theme.colors.white50};
    font-style: normal;
    letter-spacing: 0.1px;
  }

  ${({ type }) => (type === 'password'
    ? css`
        padding-right: 0;
        font-weight: 700;
        letter-spacing: 6px;
      `
    : css`
        font-weight: normal;
      `
  )};
`