import { styled } from '../../../styled';
import { dataGridClassnames } from '../../constants';
export const DataGridSection = styled.div `
  display: flex;
  grid-column: calc(var(--left-columns-count) + 1) / calc(var(--right-columns-count) * -1 - 1);
  flex-direction: column;

  min-width: 0;

  background-color: ${({ theme }) => theme.palette.background.default};

  & .${dataGridClassnames.header} {
    position: sticky;
    z-index: ${({ theme }) => theme.zIndex.fab - 1};
    top: 0;

    background-color: ${({ theme }) => theme.palette.background.default};
  }

  & .${dataGridClassnames.body} {
    scrollbar-gutter: unset;
  }

  &.${dataGridClassnames.pinnedSectionNoData} {
    grid-column: 1 / -1;
  }

  &.${dataGridClassnames.leftPinnedSection} {
    position: sticky;
    z-index: ${({ theme }) => theme.zIndex.fab};
    left: 0;

    container-name: data-grid-left-pinned-section;
    container-type: scroll-state;
    grid-column: 1 / calc(var(--left-columns-count) + 1);

    &::after {
      content: '';

      position: absolute;
      z-index: ${({ theme }) => theme.zIndex.fab};
      top: 0;
      right: 0;

      height: 100%;

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

    & .${dataGridClassnames.header} {
      left: 0;
    }
      

    /* Причина игнора: прогрессивное улучшение */
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    @container data-grid-left-pinned-section scroll-state(stuck: left) {
      &::after {
        /* Ширина видимой части тени */
        width: 4px;

        box-shadow: 3px 0 4px 0 #63636326;
      }
    }
  }

  &.${dataGridClassnames.rightPinnedSection} {
    position: sticky;
    z-index: ${({ theme }) => theme.zIndex.fab};
    right: 0;

    container-name: data-grid-right-pinned-section;
    container-type: scroll-state;
    grid-column: calc(var(--right-columns-count) * -1 - 1) / -1;

    &::after {
      content: '';

      position: absolute;
      z-index: ${({ theme }) => theme.zIndex.fab};
      top: 0;
      left: 0;

      height: 100%;

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

    & .${dataGridClassnames.header} {
      right: 0;
    }

    /* Причина игнора: прогрессивное улучшение */
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    @container data-grid-right-pinned-section scroll-state(stuck: right) {
      &::after {
        /* Ширина видимой части тени */
        width: 4px;

        box-shadow: -3px 0 4px 0 #63636326;
      }
    }
  }
`;
