// @flow
import styled from 'styled-components';
import { Td as RsrTd } from 'react-super-responsive-table';
import type { TdProps } from './td.proptypes';
import type { PatchworkComponent } from '../../../../types';
import { bpLarge } from '../../../../breakpoints';
import {
  getCellPaddingMobile,
  getCellPaddingDesktop,
} from '../table.css-rules';

export const Td: PatchworkComponent<TdProps> = styled(RsrTd)`
  padding: ${getCellPaddingDesktop};

  .tdBefore {
    display: none;
  }

  @media (max-width: ${bpLarge}) {
    padding: ${getCellPaddingMobile};
    display: block;

    .tdBefore {
      display: block;
      position: absolute;
      padding-right: 10px;
      left: 30px;
      width: 45%;
      white-space: nowrap;
      text-align: left;
    }

    &.pivoted {
      position: relative;
      text-align: right;
    }
  }
`;

Td.displayName = 'Td';
