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

  /* Let flex items be aligned to the baseline of their first child */
  align-items: baseline;

  ${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;
  }

  > * {
    flex-grow: 1;
    flex-basis: 50%;
  }

  > ${StyledFormField} {
    /* Override 'display: flex' to not interfere with labels' baseline alignment */
    display: block;

    ${StyledLabel} {
      /* Enable baseline alignment against this element */
      display: inline-block;
    }
  }
`;
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