import styled from 'styled-components';

const css = styled.div;

export default css<any>`
   .input-title {
      font-weight: 600;
      text-transform: uppercase;
      padding-bottom: 3px;
      font-size: 13px;
      color: rgba(0, 0, 0, 0.8);
      opacity: ${(props) => (props.disabled ? 0.7 : 1.0)};
      ${(props) => props.disabled && 'cursor: not-allowed !important;'};

      &.focus {
         color: ${(props) => props.theme.primary};
      }
   }

   textarea {
      display: flex;
      align-content: center;
      align-items: center;
      //border-radius: 4px;
      width: 100%;
      background: white;
      border: 2px solid rgba(0, 0, 0, 0.25);
      border-radius: 3px;
      color: #444;
      font-size: 15px;
      font-weight: 600;
      padding: 10px;
      resize: none;
      background: ${(props) => (props.disabled ? '#ddd' : 'white')};
      ${(props) => props.disabled && 'border-color: #ddd'};
      opacity: ${(props) => (props.disabled ? 0.7 : 1.0)};
      ${(props) => props.disabled && 'cursor: not-allowed !important;'};

      ${(props) =>
         props.themeInput === 'gray' &&
         `background: #eee;
            border-color: #eee;
        `}

      &.has-error {
         border-color: ${(props) => props.theme.red} !important;
      }

      &.focus {
         border-color: ${(props) => props.theme.primary};
      }
   }

   .error-input {
      color: ${(props) => props.theme.red};
      text-align: left;
      font-weight: 600;
      margin: 0px;
      padding: 0px;
      font-size: 13px;
      margin-top: 5px;
      margin-bottom: 20px;
   }
`;
