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

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

   input {
      padding: 17px 16px;
      width: 100%;
      height: 100%;
      border-radius: 3px;

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

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

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

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

   & input {
      text-transform: uppercase;
      font-size: 12px;
      box-shadow: inset 40px 40px 0px 40px #fff;
      @include _Desktop {
         font-size: 10px;
      }

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

   & input::placeholder,
   & textarea::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;

      input {
         box-shadow: inset 40px 40px 0px 40px #fdc8c7;
      }
   }

   &.input--textarea {
      textarea {
         padding: 17px 16px;
         width: 100%;
         height: 130px;
         border-radius: 3px;
         resize: none;
         @include _Tablet {
            padding: 17px 16px;
         }
         @include _XSDesktop {
            padding: 13px 8px;
            height: 135px;
         }
         @include _Desktop {
            padding: 14px 12px;
            height: 120px;
         }
         @include _HDesktop {
            padding: 21px 16px;
            height: 169px;
         }
      }
   }
}

input[type="checkbox"] {
   appearance: none;
   position: relative;

   border-radius: 2px;
   background: #fff;
   transition: 500ms;

   &::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 0px;
      height: 0px;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.707153 7.17188L5.20715 11.6719L15.2072 0.671875' stroke='white' stroke-width='2'/%3e%3c/svg%3e ");
      background-repeat: no-repeat;

      transition: 500ms;
      overflow: hidden;

      @include _Tablet {
         top: 1px;
         left: 1px;
      }
   }

   &:checked {
      background: cl("accent");
      &::after {
         width: 14px;
         height: 14px;
      }
   }
}
