import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { mix, rgba } from 'polished';
import { defaultThemeProp } from '../../theme';
import { calculateFontSize, getReadableStatusColor } from '../../styles';
export const StyledFormControl = styled.div(({ theme, status, hasSuggestion }) => {
    const { base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale, animation: { speed, timing }, palette }, components: { 'form-field': formField, 'form-control': { 'foreground-color': foreground, 'background-color': background, 'border-color': brd, 'border-radius': radius, 'border-width': borderWidth, ':hover': { 'border-color': hoverBorderColor }, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, ':disabled': { 'border-color': disabledBorderColor, 'background-color': disabledBackgroundColor }, ':read-only': { 'border-color': readOnlyBorderColor, 'background-color': readOnlyBackgroundColor } } } } = theme;
    const fontSize = calculateFontSize(baseFontSize, baseFontScale);
    const borderColor = status && formField[status] ? getReadableStatusColor(theme, status) : brd;
    const backgroundColor = hasSuggestion && status
        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])
        : background;
    const inline = formField.layout === 'inline';
    return css `
    color: ${foreground};
    background-color: ${backgroundColor};
    border-radius: calc(${baseRadius} * ${radius});
    border-color: ${borderColor};
    border-width: ${borderWidth};
    border-style: solid;
    transition-property: color, background-color, border-color;
    transition-duration: ${speed};
    transition-timing-function: ${timing.ease};

    ${inline &&
        css `
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
      align-self: flex-start;
    `}

    &,
      & > select {
      outline: none;
    }

    &:disabled,
    &[disabled] {
      background-color: ${disabledBackgroundColor};
      border-color: ${disabledBorderColor};
      cursor: not-allowed;
    }

    &:focus:not([disabled]) {
      border-color: ${focusBorderColor};
      box-shadow: ${shadow};
      ${hasSuggestion &&
        css `
        background-color: ${background};
      `}
    }

    &:focus-within:not([disabled]) {
      ${hasSuggestion &&
        css `
        background-color: ${background};
      `}
    }

    &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {
      ${!status &&
        css `
        border-color: ${hoverBorderColor};
      `}
      ${hasSuggestion &&
        css `
        background-color: ${background};
        box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};
      `}
    }

    ${hasSuggestion &&
        css `
      border-end-end-radius: 0;
    `}

    &[readonly] {
      background-color: ${readOnlyBackgroundColor};
      border-color: ${readOnlyBorderColor};
    }

    @media (pointer: coarse) {
      /* stylelint-disable-next-line unit-allowed-list */
      font-size: max(${fontSize.s}, 16px);
    }
  `;
});
StyledFormControl.defaultProps = defaultThemeProp;
const FormControl = forwardRef(function FormControl(props, ref) {
    return _jsx(StyledFormControl, { ref: ref, ...props });
});
export default FormControl;
//# sourceMappingURL=FormControl.js.map