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)`
  ${ModalWindow} {
    width: 616px;
    max-height: 95vh;
    overflow-y: auto;

     ${customScrollbar}

    ${isMobileDevice
    ? css`
            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)`
  margin: 15px;

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

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

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

export const StyledLink = styled(ProfileLink)`
  margin: 5px;

  display: flex;
  align-items: flex-start;
  color: white;
  padding: 10px;

  &:hover {
    text-decoration: underline;
    background-color: #2d323d;
    border-radius: 2px;
  }
`

export const ScItem = styled(TournamentInfo)``