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

import { isMobileDevice } from 'config/userAgent'

export const CardWrapperOuter = styled.li.attrs({
  tabIndex: 0,
})`
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  ${isMobileDevice
    ? css`
        width: 100%;
        padding-top: 0;
        margin-bottom: 5px;
        outline: none;
        }
      `
    : ''};
`

export const CardWrapper = styled.div<{
  open: boolean,
}>`
  display: flex;
  align-items: center;

  background-color: ${({ open, theme: { colors } }) => (open ? colors.button : '#3f3f3f')};
  cursor: pointer;
  ${isMobileDevice
    ? css`
        padding: 10px;
        width: 100%;
        height: 50px;
        justify-content: space-between;
      `
    : ''};
`

export const TournamentName = styled(Name)`
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 7px;
  white-space: nowrap;
`

export const CountMatches = styled.span<{ color?: string }>`
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: ${({ color }) => color};
  width: 20px;
  text-align: end;
  margin: 0 9px 0 10px;
`

export const ScFirstInfo = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-right: 10px;
  overflow: hidden;
`

export const ScSecondInfo = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
`

export const ScMatchesWrapper = styled.ul`
  display: flex;
  flex-direction: column;
`

export const ScStar = styled(Icon)`
  display: flex;
  justify-content: center;
  align-items: center;
`
