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

import { isMobileDevice } from 'config'

import { Name } from 'features/Name'
import { customScrollbar } from 'features/Common'

export const Container = styled.div``

export const TableWrapper = styled.div`
  width: 100%;
  overflow: auto;
  font-size: 11px;
  clip-path: inset(0 0 0 0 round 5px);
  background-color: #333333;

  ${isMobileDevice
    ? ''
    : css`
        max-height: calc(100vh - 203px);
    `}; 

  ${customScrollbar}
`

export const Table = styled.table`
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse; 
  letter-spacing: -0.078px;
  table-layout: fixed;
`

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

export const CellContainer = styled.td`
  height: 45px;
  border-bottom: 0.5px solid #5C5C5C;
  background-color: #333333;

  :nth-child(2) {
    text-align: center;
  }

  :first-child, :last-child {
    width: 32px;
  }

  :first-child {
    padding-left: 12px;
  }

  :last-child {
    text-align: right;
    padding-right: 12px;
  }
`

export const Row = styled.tr`
  :last-child:not(:first-child) {
    ${CellContainer} {
      border-bottom: none;
    }
  }
`

export const Header = styled.thead`
  position: sticky;
  top: 0;
  z-index: 1;
    
  ${CellContainer} {
    background-color: #292929;
    border-bottom-color: ${({ theme }) => theme.colors.secondary};
  }
`

export const ParamValueContainer = styled.div``

type TParamValue = {
  clickable?: boolean,
}

export const ParamValue = styled.span.attrs(({ clickable }: TParamValue) => ({
  ...clickable && { tabIndex: 0 },
}))<TParamValue>`
  display: inline-block;
  width: 15px;
  height: 15px;
  text-align: center;
  position: relative;
  font-weight: ${({ clickable }) => (clickable ? 600 : 400)};
  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;
`
