import styled, { css } from 'styled-components';
import { Button } from 'grommet/es6/components/Button';


var sizeStyle = function sizeStyle(props) {
  var data = props.theme.calendar[props.size];
  return css(['font-size:', ';line-height:', ';'], data.fontSize, data.lineHeight);
};

export var StyledColors = styled.div.withConfig({
  displayName: 'StyledColors',
  componentId: 'sc-1pzrl24-0'
})(['', ''], function (props) {
  return sizeStyle(props);
});

export var StyledRows = styled.div.withConfig({
  displayName: 'StyledColors__StyledRows',
  componentId: 'sc-1pzrl24-1'
})(['position:relative;']);

export var StyledRow = styled.div.withConfig({
  displayName: 'StyledColors__StyledRow',
  componentId: 'sc-1pzrl24-2'
})(['position:relative;display:flex;flex-direction:row;flex-justify:between;']);

export var StyledColorContainer = styled.div.withConfig({
  displayName: 'StyledColors__StyledColorContainer',
  componentId: 'sc-1pzrl24-3'
})(['flex:0 0;']);

var colorSizeStyle = function colorSizeStyle(props) {
  var data = props.theme.calendar[props.size];
  return css(['width:', ';height:', ';'], data.daySize, data.daySize);
};

export var StyledColor = styled(Button).withConfig({
  displayName: 'StyledColors__StyledColor',
  componentId: 'sc-1pzrl24-4'
})(['top:0;position:absolute;display:flex;justify-content:center;align-items:center;', ' span{visibility:hidden;};transition:transform .2s;&:hover{z-index:10;width:auto;-webkit-transform:scale(2);-moz-transform:scale(2);transform:scale(2);span{visibility:visible;};);'], function (props) {
  return colorSizeStyle(props);
});