import { styled } from '../../styled';
import { Typography } from '../../Typography';
import { MIN_ROW_HEIGHT } from '../constants';
import { dataGridRowClassnames } from '../Row/constants';
import { dataGridCellClassnames } from './constants';
export const Wrapper = styled.div `
  overflow: hidden;
  display: flex;
  align-items: center;

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

  &.${dataGridCellClassnames.disabled} {
    opacity: 0.5;
  }

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

  &.${dataGridCellClassnames.alignLeft} {
    justify-content: flex-start;
  }

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

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

  ${({ theme }) => theme.breakpoints.down('sm')} {
    justify-content: space-between;

    min-height: unset;
    margin-top: ${({ theme }) => theme.spacing(3)};
    padding: 0;

    &.${dataGridCellClassnames.isHideOnMobile} {
      display: none;
    }

    & .${dataGridRowClassnames.checkbox} {
      align-self: flex-start;
      order: 1;
    }

    &.${dataGridCellClassnames.grouped} {
      margin-top: ${({ theme }) => theme.spacing(1)};

      & .${dataGridCellClassnames.cellContent} {
        flex-direction: row;
        gap: ${({ theme }) => theme.spacing(2)};
        align-items: baseline;

        & .${dataGridCellClassnames.columnLabel} {
          /* Декоративный разделитель между названием колонки и значением */
          &::after {
            content: ':';
          }
        }
      }
    }

    &:first-of-type {
      margin-top: 0;
    }
  }
`;
export const ColumnLabel = styled(Typography) `
  display: none;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: block;

    &.${dataGridCellClassnames.columnLabelHidden} {
      display: none;
    }
  }
`;
export const CellContent = styled.div `
  min-width: 0;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: flex;
    flex-direction: column;
    gap: ${({ theme }) => theme.spacing(1)};
    align-items: flex-start;

    width: 100%;
    
    &.${dataGridCellClassnames.actionColumn} {
      align-items: flex-end;
    }
  }
`;
