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

import { Name } from 'features/Name'

export const Container = styled.div`
  width: 100%;
  font-size: 11px;
  overflow: hidden;
  border-radius: 5px;
  background-color: #333333;
`

export const TeamShortName = styled(Name)`
  color: ${({ theme }) => theme.colors.white};
  letter-spacing: -0.078px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.5;
`

export const Row = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  padding: 0 12px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);

  :last-child {
    border-bottom: none;
  }
`

export const ParamValueContainer = styled.div``

type TParamValue = {
  clickable?: boolean,
}

export const ParamValue = styled.span.attrs(({ clickable }: TParamValue) => ({
  ...clickable && { tabIndex: 0 },
}))<TParamValue>`
  font-weight: 600;
  color: ${({ clickable, theme }) => (clickable ? '#5EB2FF' : theme.colors.white)};

  ${({ clickable }) => (clickable
    ? css`
         cursor: pointer;
      `
    : '')}
`

export const StatItemTitle = styled.span`
  color: ${({ theme }) => theme.colors.white};
  letter-spacing: -0.078px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.5;
`

export const Divider = styled.span`
  color: ${({ theme }) => theme.colors.white};
  opacity: 0.5;
  font-weight: 600;
`
