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

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

export const StyledTextArea = styled.textarea`
  @mixin ${commonInputBaseStyles};

  border-style: none;
  resize: none;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
`;

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

  display: block;
`;

export const StyledTextAreaRowContainer = styled.div`
  display: flex;
`;

export const StyledTextAreaContainer = styled.div`
  flex-grow: 1;
  line-height: 0;
  position: relative;
`;

export const StyledTextAreaMirror = styled(StyledTextArea)`
  @mixin ${commonInputBaseStyles};

  border: 0;
  bottom: 0;
  height: 0;
  left: 0;
  overflow: hidden;
  padding-bottom: 0;
  padding-top: 0;
  position: absolute;
  right: 0;
  transform: translateZ(0px);
  visibility: hidden;
`;