import { css } from 'styled-components'

import { insports as platformInsports } from 'config/clients/insports'
import { isMobileDevice } from 'config/userAgent'

import { Background } from 'features/Background'

import type { ClientConfig } from './types'

export const insports: ClientConfig = {
  ...platformInsports,
  background: Background,
  styles: {
    centerBlock: css`
      margin-top: 9.15rem;
      ${isMobileDevice ? css`
        margin-top: 107px;
        @media screen and (orientation: landscape) {
          width: 290px;
          margin: auto;
        }
      ` : ''};
    `,
    logo: css`
      background-image: url(/images/insports-logo.svg);
      background-position: center;
      height: 85px;
      width: 275px;
      margin-bottom: 1.82rem;

      ${isMobileDevice ? css`
          margin-bottom: 15px;
          width: 165px;
          height: 50px;
          @media screen and (orientation: landscape){
            width: 92px;
            height: 22px;
          }
        ` : ''}
    `,
  },
}