import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { StyledFormControl } from '../FormControl';
export const StyledRangeInputContainer = styled.div `
  gap: 1rem;

  /* Let flex items be aligned to the baseline of their first child */
  align-items: baseline;
  display: grid;
  grid-template-columns: 1fr 1fr;

  ${StyledFormControl} {
    position: relative;
  }

  > :first-child {
    > ${StyledFormControl}:after {
      content: '-';
      position: absolute;
      width: 1rem;
      inset-inline-end: -1rem;
      text-align: center;
    }
  }

  > ${StyledFormControl}:first-child:after {
    content: '-';
    position: absolute;
    width: 1rem;
    inset-inline-end: -1rem;
    text-align: center;
  }
`;
StyledRangeInputContainer.defaultProps = defaultThemeProp;
const StyledInput = styled.input(({ theme: { base, components } }) => {
    return css `
    width: 100%;
    height: ${components.input.height};
    min-height: ${base['hit-area']['mouse-min']};
    padding-block: 0;
    padding-inline: ${components.input.padding};
    appearance: none;
    -webkit-appearance: none;
    text-align: inherit;

    @media (pointer: coarse) {
      min-height: ${base['hit-area']['finger-min']};
    }
  `;
});
StyledInput.defaultProps = defaultThemeProp;
export default StyledInput;
//# sourceMappingURL=Input.styles.js.map