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

import { ProfileLink } from 'features/ProfileLink'

export const Description = styled.div<{isHidden?: boolean}>`
  padding: 22px 0 24px;
  display: flex;
  justify-content: space-between;
  color: #fff;

  ${isMobileDevice
    ? css`
        padding: 0 15px;
        align-items: baseline;
      `
    : ''};
  
  ${({ isHidden }) => (isHidden && isMobileDevice ? css`
      display: none;
  ` : '')}
`

export const DescriptionInnerBlock = styled.div`
  ${isMobileDevice ? css`
    width: 100%;
  ` : ''}
`

export const Score = styled.span`
  margin: 0 10px;
  color: inherit;
  white-space: nowrap;
  font-weight: 700;

  ${isMobileDevice
    ? css`
      margin: 0 5px;
    `
    : ''};
`

export const PenaltyScore = styled.span`
  font-weight: 400;
  opacity: .8;
`

export const StyledLink = styled(ProfileLink)`
  display: flex;
  align-items: center;
  color: #fff;

  &:hover {
    text-decoration: underline;
  }
`

export const Title = styled.div`
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: 20px;

  &:hover > ${StyledLink}:not(:hover) {
    opacity: 0.7;
  }

  &:hover > ${Score}:not(:hover){
    opacity: 0.7;
    pointer-events: none;
  }

  ${isMobileDevice
    ? css`
        font-size: 14px;
        margin-bottom: 5px;
      `
    : ''};
`

export const Views = styled.div`
  color: #fff;
  opacity: 0.7;
  font-size: 20px;
  min-width: 90px;

  ${isMobileDevice
    ? css`
      font-size: 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
    `
    : ''};
`

export const MatchDate = styled.span`
  font-weight: 500;
`

export const Time = styled.span`
  font-weight: 300;
  margin-right: 10px;
  text-transform: uppercase;
`
