import styled from 'styled-components';
import { GetThemeVar } from '../../support/GetThemeVar';

const css = styled.div;

export const FormStyle = css<any>`
   .input-title {
      font-weight: 600;
      text-transform: uppercase;
      padding-bottom: 3px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.8);
      transition: 0.2s all;

      &.focus {
         color: ${(props) => GetThemeVar(props.theme, 'primary')};
         transition: 0.2s all;
      }
   }

   .input-border {
      display: flex;
      align-content: center;
      align-items: center;
      width: 100%;
      background: white;
      border: 2px solid rgba(0, 0, 0, 0.25);
      border-radius: 3px;
      color: #444;
      font-size: 15px;
      font-weight: 600;
      height: 40px;
      transition: 0.2s all;

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

      .prefix {
         flex: 0;
         vertical-align: middle;
         height: 100%;
         padding-left: 10px;
         font-size: 14px;
         align-items: center;
         justify-content: center;
         display: flex;
      }

      .suffix {
         flex: 0;
         vertical-align: middle;
         height: 100%;
         padding-right: 10px;
         font-size: 14px;
         align-items: center;
         justify-content: center;
         display: flex;
      }

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

      input {
         padding: 7px 10px;
         width: 100%;
         border: none;
         flex: 1;
         background: transparent;
         font-size: 14px;
         font-weight: 500;
      }

      .prefix ~ input {
         padding-left: 10px;
      }

      &.text-right {
         input {
            text-align: right;
         }
      }

      &.input-hidden {
         border: none;
      }

      &.focus {
         transition: 0.2s all;
         border-color: ${(props) => GetThemeVar(props.theme, 'primary')};
      }
   }

   .error-input {
      color: ${(props) => GetThemeVar(props.theme, 'red')};
      text-align: left;
      font-weight: 600;
      margin: 0px;
      padding: 0px;
      font-size: 13px;
      margin-top: 4px;
      margin-bottom: 10px;
   }

   &.hide {
      display: none;
   }
`;
