import { options , ColorScheme } from './options' ; export const canvas = ( scheme ) => ( { height : `${ options . frontCanvasSize }px` , width : `${ options . frontCanvasSize }px` , border : `2px solid ${ scheme . grid }` , background : scheme . gridBg , } ) ; export const result = ( scheme ) => ( { display : 'inline-block' , height : `${ options . backCanvasSize }px` , width : `${ options . backCanvasSize }px` , border : `1px solid ${ scheme . grid }` , background : scheme . gridBg , } ) ; export const wrapper = ( _scheme ) => ( { 'text-align' : 'center' , } ) ; export const actions = ( _scheme ) => ( { } ) ; export const action = ( scheme ) => ( { 'font-size' : '22px' , border : 'none' , 'border-radius' : '50%' , outline : 'none' , background : scheme . buttonBg , color : scheme . buttonIcon , display : 'inline-flex' , width : '44px' , height : '44px' , padding : '0' , 'align-items' : 'center' , 'justify-content' : 'center' , margin : '0 5px' , } ) ;