import { styled } from '../styled';
import { PAGE_ASIDE_WIDTH } from './constants';
export const Wrapper = styled.aside `
  overflow: auto;
  grid-column: 2;
  grid-row: 2;

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

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

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    padding: ${({ theme }) => theme.spacing(4)};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    overflow: unset;
    order: 3;

    width: unset;
    margin: ${({ theme }) => theme.spacing(0, 4, 4)};

    background-color: ${({ theme }) => theme.palette.background.default};  
    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
    border-radius: ${({ theme }) => theme.shape.medium};
  }
`;
