import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../../theme';
import { StyledPopover } from '../../Popover/Popover.styles';
import { StyledSelect } from '../../Select/Select';
import Dialog from '../../Dialog/Dialog';
import { StyledFormField } from '../../FormField/FormField';
import Button, { StyledButton } from '../../Button';
export const BareInput = styled.input(({ theme, size }) => {
    return css `
    color: ${theme.components['form-control']['foreground-color']};
    border: 0;
    outline: none;
    width: ${size}ch;
    background-color: transparent;
    text-align: end;
    margin-inline-end: 0.125rem;
    height: inherit;

    &::placeholder {
      font-size: 0.6em;
      text-align: center;
      transform: translateY(-0.35ex);
    }

    &:last-child {
      text-align: start;
    }

    &:nth-child(3) {
      text-align: start;
      &::placeholder {
        text-align: start;
      }
    }

    ::-webkit-outer-spin-button,
    ::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &[type='number'] {
      -moz-appearance: textfield;
    }

    :not(:first-child) {
      margin-inline-start: 0.125rem;
    }
  `;
});
BareInput.defaultProps = defaultThemeProp;
export const StyledInputContainer = styled.div(({ theme }) => {
    const { base: { palette, 'font-weight': fontWeight, shadow } } = theme;
    return css `
    height: inherit;
    overflow: hidden;

    > ${StyledSelect} {
      background-color: transparent;
      border-radius: 0;
      border: 0;
      color: currentcolor;
      opacity: 1;
      width: max-content;

      &:focus:not([readonly]):enabled {
        box-shadow: ${shadow['focus-inset']};
      }

      &:hover:not([readonly]):enabled {
        font-weight: ${fontWeight['semi-bold']};
      }

      option {
        font-weight: ${fontWeight.normal};
        background-color: ${palette['primary-background']};
      }

      @media (pointer: coarse) {
        min-height: inherit;
      }
    }
  `;
});
StyledInputContainer.defaultProps = defaultThemeProp;
const StyledDateTime = styled.div(props => {
    const { theme: { base: { 'font-family': fontFamily, spacing, 'hit-area': hitArea }, components: { input: { height }, 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } } } = props;
    return css `
    min-width: min-content;
    height: ${height};
    min-height: ${hitArea['mouse-min']};
    outline: none;
    padding: 0 ${spacing};

    @media (pointer: coarse) {
      min-height: ${hitArea['finger-min']};
    }

    ${StyledFormField}:enabled > &:focus-within {
      border-color: ${focusBorderColor};
      box-shadow: ${shadow};
    }

    ${StyledPopover},
    ${StyledSelect} {
      font-family: ${fontFamily};
    }

    > ${StyledButton} {
      margin-inline-start: auto;
    }
  `;
});
StyledDateTime.defaultProps = defaultThemeProp;
export default StyledDateTime;
export const StyledInputButton = styled(Button)(props => {
    const { theme: { base: { 'border-radius': baseBorderRadius, 'hit-area': hitArea }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth } } } } = props;
    return css `
    border-radius: calc(${baseBorderRadius} * ${formBorderRadius});
    border: 0;
    &:enabled {
      color: ${fgColor};
    }
    min-height: calc(${height} - 2 * ${borderWidth});
    height: calc(${height} - 2 * ${borderWidth});
    width: calc(${height} - 2 * ${borderWidth});
    @media (pointer: coarse) {
      min-height: calc(${hitArea['finger-min']} - 2 * ${borderWidth});
      width: calc(${hitArea['finger-min']} - 2 * ${borderWidth});
    }
  `;
});
StyledInputButton.defaultProps = defaultThemeProp;
export const StyledClearNowButtonsContainer = styled.div(({ theme }) => {
    const spacing = theme.base.spacing;
    return css `
    padding-block: calc(${spacing} * 1.5);
    padding-inline: calc(${spacing} * 1.5);
  `;
});
StyledClearNowButtonsContainer.defaultProps = defaultThemeProp;
export const StyledDialogContent = styled.div `
  overflow: auto;
`;
export const StyledDatePickerDialog = styled(Dialog) `
  min-width: unset;
`;
StyledDatePickerDialog.defaultProps = defaultThemeProp;
//# sourceMappingURL=DateTime.styles.js.map