import Drawer from '@mui/material/Drawer';
import { paperClasses } from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import { styled } from '../styled';
import { OFFSET_TOP_SCREEN } from './constants';
export const StyledDrawer = styled(Drawer) `
  ${`.${paperClasses.root}`} {
    max-height: calc(100vh - ${OFFSET_TOP_SCREEN});

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

    border-top-left-radius: calc(${({ theme }) => theme.shape.medium} * 2);
    border-top-right-radius: calc(${({ theme }) => theme.shape.medium} * 2);
  }
`;
export const Header = styled.header `
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;

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

  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
`;
export const HeaderTitle = styled(Typography) `
  margin-right: ${({ theme }) => theme.spacing(2)};
`;
export const Body = styled.div `
  overflow-y: auto;
`;
