import styled from "styled-components";
import { mq } from "@watfiree/mq";

const ModalWrapper = styled.div`
  background: black;
  color: white;

  ${mq.from("xs")} {
    background: grey;
    color: darkgrey;
  }

  ${mq.between("sm", "xl")} {
    background: white;
    color: black;
  }
`;

import styled from "styled-components";
import { createMqEntity } from "@watfiree/mq";

type myNewBreakponts = "wd" | "ws"; // can be also enum

const mq = createMqEntity<myNewBreakponts>({ wd: "2000px", ws: "1200px" });

const ModalWrapper = styled.div`
  background: black;
  color: white;

  ${mq.from("wd")} {
    background: grey;
    color: darkgrey;
  }

  ${mq.between("ws", "wd")} {
    background: white;
    color: black;
  }
`;