import { dashboardSidebarClassnames } from '../../DashboardSidebar/constants';
import { styled } from '../../styled';
import { containerClassnames } from './constants';
export const Root = styled.div `
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  flex-grow: 1;

  height: 100vh;
  padding: ${({ theme }) => theme.spacing(0, 4, 4)};

  transition: ${({ theme }) => {
    return theme.transitions.create(['max-width'], {
        duration: theme.transitions.duration.complex,
    });
}};

  /* Причина игнора: Не критично для отображения */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  &:has(.${dashboardSidebarClassnames.root}) {
    column-gap: ${({ theme }) => theme.spacing(4)};

    ${({ theme }) => theme.breakpoints.down('sm')} {
      column-gap: 0;
    }
  }

  /* Причина игнора: Прогрессивное улучшение */
  /* stylelint-disable plugin/no-unsupported-browser-features */
  @supports (height: 100dvh) {
    height: 100dvh;
  }
  /* stylelint-enable plugin/no-unsupported-browser-features */

  ${({ theme }) => theme.breakpoints.down('sm')} {
    column-gap: 0;

    min-width: unset;
    max-width: unset;
    padding: 0;
  }

  &.${containerClassnames.compact} {
    max-width: 1572px;
  }

  &.${containerClassnames.wide} {
    max-width: 1920px;
  }

  &.${containerClassnames.focusedMode} {
    max-width: 100%;
  }
`;
