import { DialogHeader } from '../DialogHeader';
import { styled } from '../styled';
import { typographyClassnames } from '../Typography/constants';
export const StyledDialogHeader = styled(DialogHeader) `
  position: relative;

  min-height: 64px;

  /* Декоративный разделитель между header и контентной частью SideDialog */
  ::before {
    content: '';

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;

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

  ${({ theme }) => theme.breakpoints.down('sm')} {
    position: sticky;
    z-index: ${({ theme }) => theme.zIndex.modal};
    top: 0;

    grid-template-columns: max-content 1fr 40px;
    column-gap: ${({ theme }) => theme.spacing(1)};

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

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

    & .${typographyClassnames.root} {
      font-size: ${({ theme }) => theme.typography.h6.fontSize};
      line-height: ${({ theme }) => theme.typography.h6.lineHeight};
    }
  }
`;
