import styled from "@emotion/styled";
import { css } from '@emotion/core';
import { Box, Flex } from '@rebass/emotion'
import { space } from "utils/theme";
import { forDesktopUp } from "utils/styles/mixins";

export const ShopContainer = styled(Box)`
  margin-bottom: ${space.large}px;
`;

export const SortCategoriesContainer = styled(Flex)`
  flex-direction: column;
  ${forDesktopUp(css`
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  `)};
`;

export const SortByContainer = styled(Box)`
  ${forDesktopUp(css`
    max-width: 400px;
  `)};
`;

export const CategoriesContainer = styled(Box)`
  ${forDesktopUp(css`
    margin-top: ${space.regular}px;
  `)};
`;