import styled, { css } from 'styled-components';
import { StyledFormControl } from '../FormControl';
import StyledInput from '../Input/Input.styles';
import { StyledText } from '../Text/Text';
import { defaultThemeProp } from '../../theme';
import { StyledButton } from '../Button';
import { StyledFlex } from '../Flex';
export const StyledStepperInput = styled(StyledFormControl)(props => {
    const { theme: { base: { spacing, 'border-radius': baseBorderRadius, 'hit-area': hitArea, palette }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } }, size } = props;
    return css `
    &:focus-within:not([disabled]) {
      border-color: ${focusBorderColor};
      box-shadow: ${shadow};
    }

    ${StyledFlex} {
      overflow: auto;
      margin-inline-start: ${spacing};
      margin-inline-end: ${spacing};
    }

    ${StyledInput} {
      color: ${fgColor};
      width: ${size}ch;
      min-width: 1ch;
      outline: none;
      border: 0;
      padding: 0;
      background-color: ${palette['primary-background']};
      height: calc(${height} - 2 * ${borderWidth});
      min-height: calc(${hitArea['mouse-min']} - 2 * ${borderWidth});
      &:focus:not([disabled]) {
        box-shadow: none;
      }
    }

    ${StyledText} {
      padding: 0 calc(0.5 * ${spacing});
      white-space: nowrap;
    }

    > ${StyledButton} {
      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});
      margin-inline-start: auto;
      border: 0;
      &:enabled {
        color: ${fgColor};
      }
      height: calc(${height} - 2 * ${borderWidth});
      min-height: calc(${hitArea['mouse-min']} - 2 * ${borderWidth});
    }
  `;
});
StyledStepperInput.defaultProps = defaultThemeProp;
const StyledNumberInput = styled(StyledFormControl)(props => {
    const { theme: { base: { spacing, 'hit-area': hitArea }, components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, 'border-width': borderWidth }, input: { height } } } } = props;
    return css `
    padding: 0 calc(0.5 * ${spacing});
    &:focus-within:not([disabled]) {
      border-color: ${focusBorderColor};
      box-shadow: ${shadow};
    }

    ${StyledInput} {
      color: inherit;
      outline: none;
      border: 0;
      padding: 0 calc(0.5 * ${spacing});
      background-color: initial;
      height: calc(${height} - 2 * ${borderWidth});
      min-height: calc(${hitArea['mouse-min']} - 2 * ${borderWidth});
      &:focus:not([disabled]) {
        box-shadow: none;
      }

      /* Numbers are written left-to-right even in RTL languages. */
      direction: ltr;
      :dir(rtl) {
        text-align: right;
      }
    }

    ${StyledText} {
      padding: 0 calc(0.5 * ${spacing});
      white-space: nowrap;
    }
  `;
});
StyledNumberInput.defaultProps = defaultThemeProp;
export default StyledNumberInput;
//# sourceMappingURL=NumberInput.styles.js.map