import { hintIconClassnames } from '../../HintIcon';
import { styled } from '../../styled';
import { headCellClassnames } from './constants';
export const Wrapper = styled.div `
  --grid-column-start: 0;
  --grid-column-end: 0;

  cursor: initial;
  user-select: none;

  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  height: 40px;
  padding: ${({ theme }) => theme.spacing(1, 2)};

  color: ${({ theme }) => theme.palette.grey[700]};

  > svg:last-child {
    width: 16px;
    height: 16px;
  }

  &.${headCellClassnames.sortable} {
    cursor: pointer;
  }

  &.${headCellClassnames.hasStartAdornment} {
    padding: ${({ theme }) => theme.spacing(1, 2, 1, 0)};
  }

  &.${headCellClassnames.alignCenter} {
    justify-content: center;
  }

  &.${headCellClassnames.alignRight} {
    justify-content: flex-end;
  }

  .${hintIconClassnames.iconWrapper}  {
    margin-right: ${({ theme }) => theme.spacing(1)};
  }
`;
