'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const fadeIn = styled.keyframes `
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
`;
const fadeOut = styled.keyframes `
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
`;
const Wrapper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['isVisible']),
}) `
  display: flex;
  background-color: ${index.getColorAlias('containerDefault')};
  box-shadow: ${(props) => props.theme.elevation.e3};
  border-radius: ${(props) => props.theme.radius.roundedB};
  font-family: ${(props) => props.theme.font.familyPrimary};
  animation: ${(props) => (props.isVisible ? fadeIn : fadeOut)} 0.4s ease-in-out;
  z-index: 1000;
`;
const Content = styled__default['default'].div ``;
const CalendarsWrapper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['narrow']),
}) `
  display: flex;
  flex-direction: ${({ narrow }) => (narrow ? 'column' : 'row')};
`;
const DatePickerWrapper = styled__default['default'].div `
  margin: ${index.getSpacing('s02', 's00')};
`;
const PeriodWrapper = styled__default['default'].div `
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: ${index.getSpacing('s02')};
  padding: ${index.getSpacing('s00', 's07')};
`;
const PeriodName = styled__default['default'].div `
  align-content: center;
`;

exports.CalendarsWrapper = CalendarsWrapper;
exports.Content = Content;
exports.DatePickerWrapper = DatePickerWrapper;
exports.PeriodName = PeriodName;
exports.PeriodWrapper = PeriodWrapper;
exports.Wrapper = Wrapper;
