import styled from 'styled-components';
import { mediaStyle, REM_UNIT_XSM, REM_UNIT_MD, REM_FONT_SIZE__SM, REM_FONT_SIZE_LG, SONIC_SILVER, JET } from '@vincent_za/styles';

import { CN_CELL } from './';

export const TableHeader = styled.p`
  margin-bottom: ${REM_UNIT_MD};
  font-size: ${REM_FONT_SIZE_LG};
  text-transform: uppercase;
`;

export const Row = styled.tr`
  display: ${props => props.isHidden ? 'none' : 'table-row'};
  position: relative;
  border-bottom: ${props => props.isMinimal ? 0 : `1px solid ${JET}`};

  &:last-child {
    border-bottom-color: transparent; /* not 0 so that a cell (input) can still have bottom shadow that is aligned  */
  };

  ${props => props.isHeader && `
    border-bottom: 0;
    text-transform: uppercase;
    background-color: ${JET};
    color: ${SONIC_SILVER};
    user-events: none;
  `}

  ${props => props.isResponsive && `
    display: ${props.isHeader ? 'none' : 'flex'};
    flex-direction: column;
    padding: ${REM_UNIT_MD} 0;

    &:active {
      background-color: ${JET};
    }

    ${mediaStyle.sm`
      display: table-row;
      padding: 0;

      &:active {
        background-color: inherit;
        box-shadow: none;
      }
    `};
  `};

  ${props => !props.isNoHeader && props.isMinimal && `
    &:nth-child(2) {
      .${CN_CELL} {
        padding-top: ${REM_UNIT_MD};
      };
    };
  `};
`;

export const CellTime = styled.span`
  margin-left: ${REM_UNIT_XSM};
  color: ${SONIC_SILVER};
  font-size: ${REM_FONT_SIZE__SM};
`;

