import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
const StyledTextArea = styled.textarea(({ resizable }) => {
    return css `
    width: 100%;
    min-height: ${props => props.theme.components['text-area']['min-height']};
    padding: ${props => props.theme.components['text-area'].padding};
    -webkit-appearance: none;
    ${resizable
        ? css `
          resize: vertical;
        `
        : css `
          resize: none;
        `}
  `;
});
StyledTextArea.defaultProps = defaultThemeProp;
// Creates a hidden pseudo element identical in size and content to the textarea element
// The hidden element mimics the textarea and is used to automatically calculate the necessary height
export const AutoResizeWrapper = styled.div(({ theme }) => {
    return css `
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    ${StyledTextArea} {
      overflow: hidden;
      grid-area: 1 / 1 / -1 / -1;
    }

    &::after {
      content: attr(data-textarea-content);
      white-space: pre-wrap;
      overflow-wrap: break-word;
      visibility: hidden;
      border-width: ${theme.components['form-control']['border-width']};
      padding: ${theme.components['text-area'].padding};
      font: inherit;
      grid-area: 1 / 1 / -1 / -1;
    }
  `;
});
AutoResizeWrapper.defaultProps = defaultThemeProp;
export default StyledTextArea;
//# sourceMappingURL=TextArea.styles.js.map