media.jsx

export function mobile(string) {
    return `@media (max-width: 767px) {${string}}`
}

export function desktop(string) {
    return `@media (min-width: 767px) {${string}}`
}

Modal.jsx

import styled from "styled-components";
import Modal from "react-modal";
import { desktop, mobile } from "styled/media";

const StyledModal = styled(Modal)`
  ${mobile`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  `}
  ${desktop`
    position: relative;
    top: 10%;
    width: fit-content;
    margin: auto;
  `}
  border: 1px solid ${({ theme }) => theme.table.separator};
  background: white;
  border-radius: 4px;
  outline: none;
  outline-color: initial;
  outline-style: none;
  outline-width: initial;
  padding: 2rem;

  display: grid;
  grid-gap: 1rem;
  grid-template-areas: "head" "body" "actions";
  grid-template-rows: min-content minmax(5rem, 1fr) min-content;
`;

StyledModal.defaultProps = {
  shouldCloseOnOverlayClick: true,
  shouldCloseOnEsc: true,
  shouldReturnFocusAfterClose: true,
  role: "dialog"
};

export const ModalHead = styled.div`
  grid-area: head;
  border-bottom: 1px solid ${({ theme }) => theme.table.separator};
  padding-bottom: 1.5rem;
`;
export const ModalBody = styled.div`
  grid-area: body;
  overflow: auto;
`;
export const ModalActions = styled.div`
  grid-area: actions;

  ${mobile`
    display: grid;
    grid-gap: 1rem;
  `}

  ${desktop`
    display: flex;
    justify-content: flex-end;
    align-items: center;

    & > * {
        margin-left: 1rem;
    }
  `}
`;

export default StyledModal;