import styled from 'styled-components';

const css = styled.div;

export default css<any>`
   position: relative;

   .input-title {
      font-weight: 600;
      text-transform: uppercase;
      padding-bottom: 3px;
      font-size: 13px;
      color: rgba(0, 0, 0, 0.8);

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

   .input-border {
      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;

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

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

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

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

      input {
         padding: 7px 10px;
         width: 100%;
         border: none;
         flex: 1;
         background: transparent;
      }

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

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

      &.input-hidden {
         border: none;
      }

      &.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: -6px;
      margin-bottom: 10px;
   }

   .autocomplete-list {
      border-radius: 5px;
      margin-top: 5px;
      position: absolute;
      z-index: 10;
      background: white;
      width: 100%;
      box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.24);

      li {
         padding: 10px;
         display: block;
         font-weight: 500;
         font-size: 12px;

         &:hover,
         &.active {
            cursor: pointer;
            padding: 10px;
            background: ${(props) => props.theme.primary};
            color: white;
         }

         &.disabled {
            &:hover {
               background: transparent;
               cursor: default;
               color: initial;
            }
         }
      }
   }
`;
