Grid width mixin

width.js

// @flow
import * as styled from 'styled-components';

const SMALL_COL_NUMBER = 6;
const MEDIUM_COL_NUMBER = 8;
const LARGE_COL_NUMBER = 12;
const XLARGE_COL_NUMBER = 12;
const SMALL_GUTTER = 16;
const MEDIUM_GUTTER = 24;
const LARGE_GUTTER = 24;
const XLARGE_GUTTER = 32;
const XLARGE_COL_SIZE = (1364 - (XLARGE_COL_NUMBER + 1) * XLARGE_GUTTER) / XLARGE_COL_NUMBER;

type SmallColumns = 1 | 2 | 3 | 4 | 5 | 6
type MediumColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
type LargeColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

export default function width(small: SmallColumns, medium: MediumColumns, large: LargeColumns, xlarge: LargeColumns) {
	return styled.css`
		@media only screen and (max-width: 799px) {
			width: calc(${small} * ((100vw - (${SMALL_COL_NUMBER} + 1) * ${SMALL_GUTTER}) / ${SMALL_COL_NUMBER}) + (${small} - 1) * ${SMALL_GUTTER})
		}

		@media only screen and (min-width: 800px) and (max-width: 1019px) {
			width: calc(${medium} * ((100vw - (${MEDIUM_COL_NUMBER} + 1) * ${MEDIUM_GUTTER}) / ${MEDIUM_COL_NUMBER}) + (${medium} - 1) * ${MEDIUM_GUTTER})
		}

		@media only screen and (min-width: 1020px) and (max-width: 1363px) {
			width: calc(${large} * ((100vw - (${LARGE_COL_NUMBER} + 1) * ${LARGE_GUTTER}) / ${LARGE_COL_NUMBER}) + (${large} - 1) * ${LARGE_GUTTER})
		}

		@media only screen and (min-width: 1364px) {
			width: calc(${xlarge} * ${XLARGE_COL_SIZE} + (${xlarge} - 1) * ${XLARGE_GUTTER})
		}
	`;
}

export const SidebarImage = styled.img`
	${width(6, 2, 3, 3)}
`;