import { styled } from '../../../styled';
import { CalendarGridPositions } from '../enums/calendarGridPositions';
export const Wrapper = styled.div `
  display: grid;
  grid-gap: ${({ theme }) => theme.spacing(4)} 0;
  grid-template:
    '${CalendarGridPositions.Prev} ${CalendarGridPositions.Head} ${CalendarGridPositions.Next}' auto
    '${CalendarGridPositions.Body} ${CalendarGridPositions.Body} ${CalendarGridPositions.Body}' 1fr
    / auto 1fr auto;
  justify-items: center;  

  min-width: 280px;
  min-height: 256px;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    grid-column-gap: ${({ theme }) => theme.spacing(1)};
    grid-template:
      '${CalendarGridPositions.Prev} ${CalendarGridPositions.Head} ${CalendarGridPositions.Next}' auto
      '${CalendarGridPositions.Body} ${CalendarGridPositions.Body} ${CalendarGridPositions.Body}' 1fr
      / auto 1fr auto;

    height: 400px;
    padding: ${({ theme }) => theme.spacing(5, 7)};
  }
`;
