import styled from 'styled-components';
import { getFontSize, getColorAlias, getSpacing } from '../../../../utils/index.js';
import { Button } from '../../../Button/index.js';

const ButtonsWrapper = styled.div `
  display: flex;
  align-items: center;
`;
const RangeButtonsWrapper = styled.div `
  display: flex;
  grid-template-columns: 50% 50%;
  align-items: center;
  font-size: ${getFontSize('size16')};
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
`;
const MonthSelector = styled(Button) `
  svg {
    fill: ${getColorAlias('contentDefault')};
  }
  font-size: inherit;
`;
const YearSelector = styled(Button) `
  svg {
    fill: ${getColorAlias('contentDefault')};
  }
  font-size: inherit;
`;
const SingleDateWrapper = styled.div `
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-weight: ${(props) => props.theme.font.weightExtrabold};
  ${getFontSize('size16')};
  color: ${getColorAlias('contentDefault')};
  padding: ${getSpacing('s03', 's05', 's03', 's05')};
`;

export { ButtonsWrapper, MonthSelector, RangeButtonsWrapper, SingleDateWrapper, YearSelector };
