.input {
   border-radius: 3px;
   background: #ffffff;

   color: cl("dark-text");
   display: inline-block;
   text-transform: uppercase;

   input {
      padding: 17px 16px;
      width: 100%;
      height: 100%;

      @include _Tablet {
         padding: 15px 16px;
      }

      @include _XSDesktop {
         padding: 10px 8px;
      }

      @include _Desktop {
         padding: 10px 12px;
      }

      @include _HDesktop {
         padding: 20px 16px;
      }
   }

   & input {
      text-transform: uppercase;
      font-size: 12px;
      @include _Desktop {
         font-size: 10px;
      }

      @include _HDesktop {
         font-size: 14px;
      }
   }

   & input::placeholder {
      font-weight: 400;
      font-size: 12px;
      color: #231f204d;
      text-transform: uppercase;

      @include _Desktop {
         font-size: 10px;
      }

      @include _HDesktop {
         font-size: 14px;
      }
   }

   &.input--tel input {
      padding-left: 0;
   }
   &.input--tel {
      padding-left: 32px;
      position: relative;

      @include _HDesktop {
         padding-left: 40px;
      }

      &::before {
         content: "";
         background: url("../../../icons/flag.png") no-repeat;
         background-size: 10px 7px;
         width: 10px;
         height: 7px;
         position: absolute;
         top: 50%;
         left: 16px;
         transform: translateY(-50%);

         @include _XSDesktop {
            left: 8px;
         }
         @include _Desktop {
            left: 12px;
         }

         @include _HDesktop {
            background-size: 17px 11px;
            width: 17px;
            height: 11px;
            left: 16px;
         }
      }

      @include _XSDesktop {
         padding-left: 22px;
      }
      @include _Desktop {
         padding-left: 26px;
      }
      @include _HDesktop {
         padding-left: 40px;
      }
   }

   &.error {
      border: 1px solid #f84744;
      border-radius: 4px;
      background: #fdc8c7;
   }
}
