import styled from 'styled-components';
import { getColorAlias, getFontSize, getDefaultTransition } from '../../../utils/index.js';
import { getTextAreaPadding } from '../utils.js';

const TextAreaInput = styled.textarea `
  color: ${getColorAlias('contentDefault')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  background: ${(props) => props.disabled ? getColorAlias('disabled01') : 'transparent'};
  ${getFontSize('size16')};
  border-radius: ${(props) => props.theme.radius.roundedC};
  ${(props) => getTextAreaPadding(props.variant)};
  width: 100%;
  margin: 2px;
  border: none;
  outline: none;
  resize: vertical;
  height: ${(props) => props.height};
  ${getDefaultTransition()};

  &::placeholder {
    color: ${(props) => props.disabled
    ? getColorAlias('contentDisabled')
    : getColorAlias('contentSubdued')};
    font-weight: ${(props) => props.theme.font.weightRegular};
  }

  &:hover {
    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'auto')};
  }

  &:focus:hover {
    background: ${(props) => props.disabled
    ? getColorAlias('disabled01')
    : getColorAlias('containerDefault')};
  }
`;

export { TextAreaInput };
