import styled from '@modern-js/runtime/styled';

export const InputWrap = styled.div<{
  height: number | string;
  width: number | string;
  center: boolean;
}>`
  .inputBox {
    width: ${props =>
      typeof props.width === 'number' ? `${props.width}px` : props.width};
    box-sizing: border-box;
    background: rgb(248, 247, 247);
    border-radius: 6px;
    resize: none;
    font-size: 0.75rem;
    line-height: 0.75rem;
    padding: 5px 10px;
    border: none;
    outline: none;
    line-height: 16.2px;
    white-space: nowrap;
    ${props => (props.center ? 'text-align: center' : '')};
    height: ${props =>
      typeof props.height === 'number' ? `${props.height}px` : props.height};
  }
  .contentContainer {
    display: flex;
    align-items: center;
  }
  .content {
    width: 100%;
  }
`;
