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

import { isMobileDevice } from 'config/userAgent'

import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'
import { TournamentInfo } from 'features/PreferencesPopup/components/TournamentInfo'
import { ProfileLink } from 'features/ProfileLink'
import { customScrollbar } from 'features/Common'
import { HeaderTitle } from 'features/PreferencesPopup/styled'

export const ScModalContainer = styled(BaseModal)`
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0 60px;

  ${ModalWindow} {
    width: 679px;
    max-height: 95vh;
    padding: 0;
    background-color: #1E2127;
    border-radius: 5px;
    overflow-y: auto;

    ${customScrollbar}

    @media (max-width: 1370px) {
      max-width: 679px;
    }

    ${isMobileDevice
    ? css`
         @media(max-width:650px) {
           width: 95vw;
         }
         @media(orientation:landscape) {
           min-width:95vw;
         }
       `
    : ''};
  }
`

export const ScBody = styled.div`
  padding: 25px 40px 0 42px;
  display: flex;
  ${isMobileDevice
    ? css`
        @media (max-width: 650px) {
          padding: 13px 25px 0;
          flex-direction: column;
          align-items: center;
        }

        @media (orientation: landscape) {
          padding: 22px 23px 0 29px;
        }
      `
    : ''};
`

export const ScHeaderTitle = styled(HeaderTitle)`
  display: flex;
  margin: 10px;

  ${isMobileDevice
    ? css`
        align-self: center;
      `
    : ''};
`

export const ScTournamentList = styled.div`
  width: 100%;
  margin-bottom: 20px;

  ${isMobileDevice
    ? css`
        display: flex;
        flex-direction: column;
        align-self: center;
      `
    : ''};
`

export const ScList = styled.div`
  max-width: 212px;
  margin-top: 20px;

  ${isMobileDevice
    ? css`
        display: flex;
        flex-direction: column;
        align-self: center;
      `
    : ''};
`

export const StyledLink = styled(ProfileLink)`
  display: flex;
  align-items: flex-start;
  color: white;
  padding: 5px 10px;

  :hover {
    background-color: #2d323d;
    border-radius: 2px;

    & .title {
      text-decoration: underline;
    }
  }
`

export const ScItem = styled(TournamentInfo)``