import { max, min } from '@/styles/mq';
import styled, { css } from 'styled-components';
import { Box } from 'ui/grid';

const order = css`
  ${max('laptop')} {
    #settings {
      order: 1;
    }

    #form {
      order: 2;
    }

    #output {
      order: 3;
    }
  }
`;

export const Grid = styled(Box)`
  display: flex;
  flex-direction: column;
  gap: 10px;

  ${order}

  ${min('laptop')} {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 2fr 1fr;
  }

  ${min('desktop')} {
    grid-template-columns: 2fr 1fr 1.5fr;
    /* margin: 8px 5%; */
  }

  ${min('desktop-xl')} {
    margin: 8px 10% !important;
  }
`;