import { styled } from '../../styled';
export const Wrapper = styled.header `
  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};
  align-items: center;
  justify-content: space-between;

  padding: ${({ theme }) => theme.spacing(4, 6)};

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

  ${({ theme }) => theme.breakpoints.down('sm')} {
      margin: ${({ theme }) => theme.spacing(0, 4)};

      background-color: ${({ theme }) => theme.palette.background.default};
      border: 1px solid ${({ theme }) => theme.palette.components.border.default};
      border-bottom: none;
      border-top-left-radius: ${({ theme }) => theme.shape.medium};
      border-top-right-radius: ${({ theme }) => theme.shape.medium};
  }
`;
export const TitleBlock = styled.div `
  overflow: hidden;
  display: flex;
  flex-direction: column;
`;
