'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../../utils/index.js');
var utils = require('../utils.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

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

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

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

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

exports.TextAreaInput = TextAreaInput;
