"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GroupedColumnLabel = exports.BottomDrawerContent = exports.ChevronIcon = exports.CollapseButton = exports.CollapseCell = exports.CheckboxCell = exports.CellStyled = exports.ContentWrapper = exports.Wrapper = void 0;
const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
const IconButton_1 = require("../../IconButton");
const styled_1 = require("../../styled");
const Typography_1 = require("../../Typography");
const Cell_1 = require("../Cell");
const constants_1 = require("../constants");
const constants_2 = require("./constants");
exports.Wrapper = styled_1.styled.li `
  --level: 0;
  position: relative;

  &:not(:last-of-type)::before,
  &.${constants_2.dataGridRowClassnames.hidden}::before {
    content: '';

    position: absolute;
    z-index: 1;
    top: 0;
    transform: translateX(calc(${constants_1.ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${constants_1.TREE_LINE_WIDTH}px));

    display: none;

    width: 0;
    height: 100%;

    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
  }

  ${({ theme }) => theme.breakpoints.up('sm')} {
    &.${constants_2.dataGridRowClassnames.showConnector}::before,
    & .${constants_2.dataGridRowContentClassnames.root}::before {
      display: block;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding-bottom: ${({ theme }) => theme.spacing(3)};

    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};

    &:not(:first-of-type) {
      padding-top: ${({ theme }) => theme.spacing(5)};
    }

    &:first-of-type {
      padding-top: ${({ theme }) => theme.spacing(1)};
    }
  }
`;
exports.ContentWrapper = styled_1.styled.div `
  position: relative;

  display: grid;
  grid-template-columns: ${({ $gridColumns }) => $gridColumns};

  background-color: transparent;

  &::before {
    content: '';

    position: absolute;
    top: 0;
    transform: translateX(calc(${constants_1.ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${constants_1.TREE_LINE_WIDTH}px));

    width: ${constants_1.TREE_LINE_WIDTH}px;
    height: 50%;

    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
    border-radius: 0 0 0 ${({ theme }) => theme.shape.small};

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

  &:hover {
    background-color: ${({ theme }) => theme.palette.background.elementHover};
    &.${constants_2.dataGridRowContentClassnames.hovered} {
      cursor: pointer;
    }

    ${({ theme }) => theme.breakpoints.down('sm')} {
      cursor: initial;

      background-color: transparent;
    }
  }


  &.${constants_2.dataGridRowClassnames.hover} {
    background-color: ${({ theme }) => theme.palette.background.elementHover};
    &.${constants_2.dataGridRowContentClassnames.hovered} {
      cursor: pointer;
    }

    ${({ theme }) => theme.breakpoints.down('sm')} {
      cursor: initial;

      background-color: transparent;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    grid-template-columns: 1fr;
  }
`;
exports.CellStyled = (0, styled_1.styled)(Cell_1.Cell) `
  &:first-of-type {
    margin-left: calc(var(--level) * ${constants_1.ROOT_ACTION_CELL_WIDTH}px);
  }
`;
exports.CheckboxCell = styled_1.styled.div `
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;

  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
`;
exports.CollapseCell = styled_1.styled.div `
  display: flex;
  align-items: center;
  justify-content: center;

  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
  width: 24px;
  height: 24px;

  color: inherit;

  &:hover {
    background-color: ${({ theme }) => theme.palette.grey[300]};
  }
`;
exports.ChevronIcon = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd, {
    shouldForwardProp: (prop) => prop !== '$isActive',
}) `
  transform: rotateZ(${({ $isActive }) => ($isActive ? 90 : 0)}deg);

  transition: ${({ theme }) => theme.transitions.create('transform', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.short,
})};
`;
exports.BottomDrawerContent = styled_1.styled.div `
    ${({ theme }) => theme.breakpoints.down('sm')} {
      padding: ${({ theme }) => theme.spacing(5, 4)};
    }
`;
exports.GroupedColumnLabel = (0, styled_1.styled)(Typography_1.Typography) `
  display: none;

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

    margin-top: ${({ theme }) => theme.spacing(3)};

    &.${constants_2.dataGridGroupedColumnLabelClassnames.hidden} {
      display: none;
    }
  }
`;
