import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { StyledButton } from '../Button';
import { StyledFormControl } from '../FormControl';
import { StyledPopover } from '../Popover';
import { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';
export const StyledSelectInput = styled.div(({ theme: { base, components } }) => {
    return css `
    @media (pointer: coarse) {
      min-height: ${base['hit-area']['finger-min']};
    }

    div {
      min-height: calc(
        ${components.input.height} - 2 * ${components['form-control']['border-width']}
      );
    }

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

    &:hover:not([readonly]):not([disabled]):focus-within {
      border-color: transparent;
    }

    input {
      min-width: 0;
      width: 100%;
      height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});
      color: ${components['form-control']['foreground-color']};
      text-overflow: ellipsis;
      margin-inline: ${base.spacing};
    }

    input,
    input:focus {
      border: none;
      outline: none;
      flex-grow: 1;
      background-color: transparent;

      &:read-only {
        cursor: default;
      }
    }

    & > ${StyledButton} {
      align-self: stretch;
      height: auto;
      margin-block: -0.0625rem;
      margin-inline-end: -0.0625rem;
      border-start-start-radius: 0;
      border-start-end-radius: calc(
        ${base['border-radius']} * ${components['form-control']['border-radius']}
      );
      border-end-start-radius: 0;
      border-end-end-radius: calc(
        ${base['border-radius']} * ${components['form-control']['border-radius']}
      );
    }
  `;
});
StyledSelectInput.defaultProps = defaultThemeProp;
export const StyledComboBox = styled(StyledFormControl)(() => {
    return css `
    border: 0;

    &:focus {
      z-index: 1;
    }

    ${StyledPopover} {
      border-top-left-radius: 0;
      border-top-right-radius: 0;

      ${StyledMenu},
      ${StyledMenuListWrapper} {
        max-height: inherit;
      }
    }
  `;
});
StyledComboBox.defaultProps = defaultThemeProp;
//# sourceMappingURL=ComboBox.styles.js.map