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

import { tunisia as platformTunis } from 'config/clients/tunisia'

import { isMobileDevice } from 'config/userAgent'
import type { ClientConfig } from './types'

const Background = styled.div`
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  background: linear-gradient(0deg, rgba(2, 46, 48, 0.3),
  rgba(2, 46, 48, 0.3)), 
  radial-gradient(152.89% 271.81% at 0% 96.71%, #2AB7AA 3.27%, #02505C 43.69%, #0B2E4D 100%);
`

export const tunisia: ClientConfig = {
  ...platformTunis,
  background: Background,
  styles: {
    centerBlock: css`
      margin-top: 9.15rem;
      ${isMobileDevice ? css`
        margin-top: 107px;
        @media screen and (orientation: landscape) {
          width: 290px;
          margin: auto;
        }
      ` : ''};
    `,
    forgotPasswordInput: css`
      border: none;
    `,
    input: css`
      background-color: transparent;
      :not(:last-of-type) {
        border-color: ${({ theme }) => theme.colors.white};
      }
    `,
    inputGroup: css`
      border: 1px solid ${({ theme }) => theme.colors.white};
    `,
    loader: css`
      color: #0B2E4D;
    `,
    logo: css`
      background-image: url(/images/tunis_auth_logo.svg);
      width: 200px;
      height: 178px;
      margin-bottom: 1.82rem;
      
      ${isMobileDevice ? css`
        background-image: url(/images/tunis_auth_logo_mobile.svg);
        margin-bottom: 20px;
          width: 102px;
          height: 75px;
        ` : ''}
    `,
    popupApplyButton: css`
      background-color: #0E8F84;
      color: ${({ theme }) => theme.colors.white};
    `,
    submitButton: css`
      background-color: ${({ theme }) => theme.colors.white};
      color: #0B2E4D;
    `,
  },
}