import type { SerializedStyles } from "@emotion/react" ; import { css } from "@emotion/react" ; import type { Breakpoint } from "@guardian/source-foundations" ; import { breakpoints , from } from "@guardian/source-foundations" ; type Size = { breakpoint : Breakpoint ; size : string ; } ; type Sizes = { mediaQueries : Size [ ] ; default : string ; } ; const sizesAttribute = ( sizes ) : string => { if ( sizes . mediaQueries . length === 0 ) { return sizes . default ; } const queries = sizes . mediaQueries . map ( ( query ) => `(min-width: ${ breakpoints [ query . breakpoint ] }px) ${ query . size }` ) . join ( ", " ) ; return `${ queries }, ${ sizes . default }` ; } ; const dimensions = ( size , ratio ) : SerializedStyles => css `
	width: ${ size };
	height: calc(${ size } * ${ ratio });
` ; const styles = ( sizes , width , height ) : SerializedStyles => { const ratio = height / width ; return css `
		${ dimensions ( sizes . default , ratio ) }

		${ sizes . mediaQueries . map ( ( query ) => css `
				${ from [ query . breakpoint ] } {
					${ dimensions ( query . size , ratio ) }
				}
			` ) }
	` ; } ; export { Sizes , styles , sizesAttribute } ;