import styled, { css } from "styled-components";
export const Input = styled.input `
  ${({ theme }) => css `
    flex: 1;
    box-sizing: border-box;
    height: inherit;
    border: 0;
    background: transparent;
    padding: ${theme?.new?.inputNew?.padding};
    color: ${theme?.new?.inputNew?.color};
    font-size: ${theme?.new?.inputNew?.typography.fontSize};
    line-height: ${theme?.new?.inputNew?.typography.fontSize};
    font-weight: ${theme?.new?.inputNew?.typography.fontWeight};
    font-family: ${theme?.new?.inputNew?.fontFamily};

    /* Chrome, Safari, Edge, Opera */
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox */
    &[type="number"] {
      -moz-appearance: textfield;
    }
  `}
`;
export const Container = styled.fieldset `
  ${({ theme }) => css `
    display: flex;
    position: relative;
    overflow: hidden;
    width: ${theme?.new?.inputNew?.width};
    height: ${theme?.new?.inputNew?.height};
    padding: 0;
    margin: 0;
    border: 0;

    background: ${theme?.new?.inputNew?.background};
    border-bottom: ${theme?.new?.inputNew?.borderBottom};
    border-radius: ${theme?.new?.inputNew?.borderRadius};

    :hover {
      background: ${theme?.new?.inputNew?.hoverBackground};
    }

    &.read-only {
      background: ${theme?.new?.inputNew?.readonlyBackground};
    }

    &.disabled {
      background: ${theme?.new?.inputNew?.readonlyBackground};
    }

    &.error {
      :after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: ${theme?.new?.inputNew?.labelErrorColor};
      }
    }

    &.leading-icon {
      ${Input} {
        padding-left: unset;
      }
    }

    &.trailing-icon {
      ${Input} {
        padding-right: unset;
      }
    }

    ${Input} {
      ::placeholder {
        color: ${theme?.new?.inputNew?.placeholderColor};
      }

      &.error,
      &:invalid {
        & ~ ${Title} > ${Label} {
          color: ${theme?.new?.inputNew?.labelErrorColor};
        }
      }

      :disabled {
        color: ${theme?.new?.inputNew?.disabledColor};
      }

      :focus {
        outline: unset;
      }
    }
  `}
`;
export const LeadingIcon = styled.div `
  ${({ theme }) => css `
    display: flex;
    align-items: center;
    width: ${theme?.new?.inputNew?.leadingIconWidth};
    height: ${theme?.new?.inputNew?.leadingIconHeight};
    margin: ${theme?.new?.inputNew?.leadingIconMargin};
  `}
`;
export const TrailingIcon = styled.div `
  ${({ theme }) => css `
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: ${theme?.new?.inputNew?.trailingIconWidth};
    height: ${theme?.new?.inputNew?.trailingIconHeight};
    margin: ${theme?.new?.inputNew?.trailingIconMargin};
  `}
`;
export const Title = styled.div `
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: ${({ theme }) => theme?.new?.inputNew?.titleMargin};
`;
export const Label = styled.label `
  ${({ theme }) => css `
    color: ${theme?.new?.inputNew?.labelColor};
    font-size: ${theme?.new?.inputNew?.labelTypography.fontSize};
    font-weight: ${theme?.new?.inputNew?.labelTypography.fontWeight};
    line-height: ${theme?.new?.inputNew?.labelTypography.lineHeight};
    font-family: ${theme?.new?.inputNew?.fontFamily};
  `}
`;
export const Link = styled.span `
  color: ${({ theme }) => theme?.new?.inputNew?.linkColor};
  font-size: ${({ theme }) => theme?.new?.inputNew?.linkTypography.fontSize};
  line-height: ${({ theme }) => theme?.new?.inputNew?.linkTypography.lineHeight};
  font-weight: ${({ theme }) => theme?.new?.inputNew?.linkTypography.fontWeight};
  font-family: ${({ theme }) => theme?.new?.inputNew?.fontFamily};

  user-select: none;

  :hover {
    cursor: pointer;
  }
`;
//# sourceMappingURL=input-new.styled.js.map