import styled from "styled-components";
import { composeStyle } from "../../../util";
export const Container = styled.div `
  box-sizing: border-box;
  position: relative;
  user-select: none;
  * {
    box-sizing: border-box;
  }

  width: ${({ width }) => width ?? "auto"};
`;
export const InputContainer = styled.div `
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

  & > input {
    border: unset;
    width: 100%;

    :focus {
      outline: none;
    }

    font-family: ${({ theme }) => theme.new?.input?.fontFamily ?? "unset"};
    font-size: ${({ theme }) => theme.new?.input?.fontSize ?? "unset"};
    line-height: ${({ theme }) => theme.new?.input?.lineHeight ?? "unset"};
  }

  & > input:disabled {
    background: transparent;
    opacity: 0.3;
  }

  padding: ${({ theme }) => theme.new?.input?.padding ?? "unset"};
  height: ${({ theme, height }) => height ?? theme.new?.input?.height ?? "unset"};
  background: ${({ theme }) => theme.new?.input?.background ?? "unset"};
  border: ${({ theme }) => theme.new?.input?.border ?? "unset"};
  border-radius: ${({ theme }) => theme.new?.input?.borderRadius ?? "unset"};

  svg > path {
    fill: ${({ theme }) => theme.new?.colors?.primary400 ?? "unset"};
  }

  ${({ theme, error }) => composeStyle("border-color", error ? theme.new?.colors?.primary905 : undefined)}
`;
export const Label = styled.div `
  position: absolute;
  font-size: 14px;
  line-height: 20px;
  font-family: "Medium";
  top: -24px;
  left: 0;
`;
export const Helper = styled.div `
  position: absolute;
  bottom: -22px;
  left: 0;
  font-family: "Medium";

  font-size: ${({ theme }) => theme.new?.input?.helperFontSize ?? "unset"};
  line-height: ${({ theme }) => theme.new?.input?.helperLineHeight ?? "unset"};
  color: ${({ theme }) => theme.new?.input?.helperColor ?? "unset"};
`;
export const TrailingIcon = styled.div ``;
//# sourceMappingURL=input.styled.js.map