import { AriaAttributes } from 'react';
import styled from 'styled-components/macro';

import { commonInputBaseStyles, inputBorderContainerStyles } from '../StyledInput';

export const StyledInput = styled.input<{ $withPrefix: boolean }>`
  @mixin ${commonInputBaseStyles};

  border-style: none;
  height: 34px;
  padding-left: ${(props) => (props.$withPrefix ? '36px' : undefined)};
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
`;

export const StyledInputPositionContainer = styled.div`
  position: relative;
`;

export const StyledInputBorderContainer = styled.div<{
  $invalid?: AriaAttributes['aria-invalid'];
  $disabled?: boolean;
}>`
  @mixin ${inputBorderContainerStyles};

  align-items: center;
  display: flex;
`;

export const StyledInvisibleSuffix = styled.div`
  height: 34px;
  overflow: hidden;
  visibility: hidden;
`;

export const StyledAbsolutePositionedPrefix = styled.div`
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
`;

export const StyledAbsolutePositionedSuffix = styled.div`
  align-items: center;
  bottom: 0;
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
`;