import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../../theme';
import Button, { StyledButton } from '../../Button';
import { StyledLabel } from '../../Label';
import { StyledFormField, StyledLabelRow } from '../../FormField/FormField';
import { StyledSelect } from '../../Select/Select';
import StyledDateTime from '../Input/DateTime.styles';
export const StyledMonthPicker = styled.fieldset(props => {
    const { theme: { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'foreground-color': color } }, components: { 'form-control': formControl } } } = props;
    return css `
    margin: calc(2 * ${spacing}) calc(0.5 * ${spacing});
    font-size: 0.875rem;
    border: none;

    ${StyledSelect} {
      border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});
    }

    ${StyledButton} {
      border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});
      border: 0;
      &:enabled {
        color: ${color};
      }
    }
  `;
});
StyledMonthPicker.defaultProps = defaultThemeProp;
export const StyledDatePicker = styled.div(props => {
    const { theme: { base: { spacing } } } = props;
    return css `
    width: max-content;
    padding: 0 ${spacing} ${spacing} ${spacing};
    overflow-y: auto;

    ${StyledFormField} {
      padding-inline: calc(1.5 * ${spacing});
    }
  `;
});
StyledDatePicker.defaultProps = defaultThemeProp;
export const StyledMonthNavigationButton = styled(Button) `
  & + & {
    margin-inline-start: 0;
  }
`;
StyledDatePicker.defaultProps = defaultThemeProp;
export const StyledDatePickerMonthInput = styled(StyledDateTime) `
  padding: 0;
  border: 0;
  height: max-content;
  background-color: transparent;

  ${StyledFormField} {
    padding-inline: 0;

    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {
      &::after {
        content: none;
      }
    }
    > :last-child {
      margin: 0;
    }

    > ${StyledSelect}:focus {
      z-index: 1;
    }

    :first-child > ${StyledSelect} {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    :last-child > ${StyledSelect} {
      width: max-content;
      margin-inline-start: -0.0625rem;
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }
`;
StyledDatePickerMonthInput.defaultProps = defaultThemeProp;
//# sourceMappingURL=DatePicker.styles.js.map