import styled from 'styled-components';
import { BoxBlock } from "../../../modules";
import { colors } from "../../../globalStyled";
export const TextareaWrapperDiv = styled(BoxBlock) `
  position: relative;

  textarea {
    border: ${({ required }) => required ? `1px solid ${colors.error} !important` : `1px solid ${colors.grays.border}`};
    min-height: 110px;
    border-radius: 4px;
    color: ${colors.black};
    width: 100%;
    padding: 8px 11px;
    font-size: 14px;
    resize: vertical;
    font-family: Helvetica, Arial, sans-serif;
    overflow: hidden;

    ${({ autoResize, handleHeight, autoResizeMinHeight }) => autoResize && `height: ${handleHeight ? handleHeight : autoResizeMinHeight}px;`}

    :focus {
      outline: none;
      border-color: ${colors.black};
    }

    ::placeholder {
      color: ${colors.grays.disable};
    }
  }

  textarea[readonly] {
    position: absolute;
    background: #000;
    left: 0;
    top: 0;
    visibility: hidden;
    z-index: -1;
  }
`;
export const Label = styled.label `
  display: block;
  color: ${colors.grays.text};
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.05px;
  margin-bottom: 8px;
`;
