import styled, { css } from 'styled-components';
import { StyledButton } from '../Button';
import { defaultThemeProp } from '../../theme';
import StyledInput from '../Input/Input.styles';
export const StyledInputButton = styled(StyledInput) `
  background-color: inherit;
  color: currentColor;
  outline: none;
  border: 0;
  caret-color: transparent;
  cursor: default;
  width: 100%;

  & + div {
    position: absolute;
    inset-block: 0.0625rem;
    inset-inline: calc(100% - 2rem) 0;
  }
`;
export const StyledInputContainer = styled.div(({ theme: { base: { 'border-radius': borderRadius }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'border-width': borderWidth } } } }) => {
    return css `
      position: relative;

      & > ${StyledButton} {
        margin-block: -0.0625rem;
        margin-inline-end: -0.0625rem;
        border-start-start-radius: 0;
        border-start-end-radius: calc(${borderRadius} * ${formBorderRadius});
        border-end-start-radius: 0;
        border-end-end-radius: calc(${borderRadius} * ${formBorderRadius});

        &:focus,
        &:focus:hover {
          min-height: calc(${height} - 2 * ${borderWidth});
          height: calc(${height} - 2 * ${borderWidth});
          width: calc(${height} - 2 * ${borderWidth});
          border-radius: calc(${borderRadius} * ${formBorderRadius});
        }
      }
    `;
});
export const StyledCompositeInput = styled.div(({ theme: { base: { 'hit-area': hitArea }, components: { 'form-control': formControl, input } } }) => {
    return css `
      height: ${input.height};
      min-height: ${hitArea['mouse-min']};

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

      &:focus-within {
        border-color: ${formControl[':focus']['border-color']};
        box-shadow: ${formControl[':focus']['box-shadow']};
      }

      &:hover:not([readonly]):not([disabled]):focus-within {
        border-color: transparent;
      }
    `;
});
StyledCompositeInput.defaultProps = defaultThemeProp;
export default StyledCompositeInput;
//# sourceMappingURL=CompositeInput.styles.js.map